Html 视频背景和图像粘贴在其底部的DIV不'；I don’我没有按预期工作

我工作的布局，页面顶部包含一些图像和视频背景的div，我有困难使其正常工作。当我制作第一个版本时，一切看起来都不错，但当我想让它适用于不同的浏览器窗口宽度时，问题开始出现。情况如下

蓝色-带视频背景的DIV，绿色-图像，绿色带橙色边框-图像应粘贴在视频底部，其一半高度超出视频，灰色-常规页面内容

我遇到了两个问题，一个是我想不出办法让图像（橙色边框）一直保持在视频底部，而一半图像不在视频区域。我希望它一直都在那里。其他图像不会对不同的浏览器窗口宽度造成太大问题

第二个是包含视频的DIV的背景，我已经将其设置为占位符，以防浏览器不支持视频标记包含DIV不会像视频那样延伸到浏览器宽度。我希望它始终被视频覆盖-随着视频大小的变化而改变大小

有人能建议如何修复它以达到预期的效果吗

这里是代码（js fiddle上的页面区域宽度可能需要调整才能看到问题）

body{margin:0px；}
#视频盒{
宽度：100%；
位置：相对；高度：720px；
背景：url（“http://i.imgur.com/X3mb6AD.jpg“”；-webkit背景尺寸：封面；
-moz背景大小：cover；-o-background-size:cover；背景大小：cover；}
#视频覆盖{位置：绝对；文本对齐：中心；宽度：100%；}
#vt_徽标，#vt_url{display:block；}
#vt_徽标，#vt_url{显示：块；宽度：50%；}
#vt#U徽标img，#vt#U url img{显示：内联块；}
#vt_徽标图像{边距：50px 0 0 50px；}
#vt_url img{margin:50px 50px 0；}
#vt_徽标{文本对齐：左；浮动：左；}
#vt_url{文本对齐：右；浮点：右；}
#标语img{填充顶部：110px；宽度：70%；高度：自动；}
#slogan2 img{填充顶部：110px；宽度：60%；高度：自动；}
#图标img{填充顶部：110px；宽度：70%；高度：自动；}
#C容器{宽度：100%；位置：相对；}
#cvideo，#cmessage{宽度：100%；高度：360px；位置：绝对；顶部：0；左侧：0；}
#cvideo视频{宽度：100%；}
.banner_top{宽度：100%；显示：块；填充底部：150px；}
#lipsum{宽度：60%；边距：0自动；}

您的浏览器不支持HTML5视频。



Lorem ipsum dolor sit amet，是一位杰出的献身者。但欧盟侵权人。Etiam bibendum pellentesque尊严。克拉斯欧盟马萨精英。我们坐在阿梅特·梅特斯·波尔塔，亨德雷特·莫里斯在，马萨元素。这是我的错。Mauris malesuada elementum dui luctus Temporal。整数代表尊严的等级。Sed非sollicitudin arcu。在nisl vulputate fringilla和non est的Cras ac ligula。大鼠蜗壳易化。Nunc sollicitudin ipsum ipsum，rutrum前庭sem dapibus quis。

视频没有覆盖整个div，因为它保持了纵横比。如果你想拉伸它，你可以使用。对于需要剪切50%的图像，您可以使用translateY（50%）

CSS:

HTML:

您的浏览器不支持HTML5视频。

Lorem ipsum dolor sit amet，是一位杰出的献身者。但欧盟侵权人。Etiam bibendum pellentesque尊严。克拉斯欧盟马萨精英。我们坐在阿梅特·梅特斯·波尔塔，亨德雷特·莫里斯在，马萨元素。这是我的错。Mauris malesuada elementum dui luctus Temporal。整数代表尊严的等级。Sed非sollicitudin arcu。在nisl vulputate fringilla和non est的Cras ac ligula。大鼠蜗壳易化。Nunc sollicitudin ipsum ipsum，rutrum前庭sem dapibus quis。


Mauris interdum是临时的。我们的生活是美好的。前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭。这是一个非常好的例子。库拉比图尔和埃拉特·菲尼布斯、索利西图尔和埃罗斯。两名孕妇分别为elit elit、vel tempus elit和malesuada。viverra公司、智者公司、mauris ligula公司、vitae Placelat libero mauris ut neque公司。位于laoreet metus nec的Nullam ullamcorper est。Nam sit amet孕妇码头，nec hendrerit ante。前庭是爱神的前庭，拉西尼亚是爱神的前庭，亨德雷特是爱神的前庭。在奥奇索达莱斯，利奥内克，洛博蒂斯酒后驾车。整型ac magna purus。这是我的梦想。


库拉比图尔ac索达莱斯酒店。莫里斯·阿克库姆桑·利奥。前庭，前庭，前庭，前庭，前庭。这是一种美味的调味品。前庭样腔隙。这是一个很好的例子。在酒后喝苏打水的时候喝一杯。这是一辆小型卡车，这是一辆汽车。这是一位尊贵的利奥·波特。非枕叶松垂曲张。Morbi坐在amet Pellentsque nulla。但是，非同侧肌群是一条龙。在rutrum magna aliquet ac.的Praesent posuere tincidunt nisl。在orci的Praesent和ex id sapien rhoncus ultricies非。多奈克·维勒·伊库利斯·梅特斯。不要坐在我的车上。


这是一个很好的例子。整型ornare blandit magna，ac pharetra neque porta nec。圣公会领袖，奥迪奥·ac·马克西姆斯·弗林利亚，自由之士埃古斯塔斯·利奥，在无主的秃鹫精英中。Maecenas ac临时扫描电镜。鸭嘴兽。Nunc sit amet电话
body {
  margin: 0px;
}
#ccontainer {
  position:relative;
  width:100%;
  height:550px;
  background: url("http://i.imgur.com/X3mb6AD.jpg");
  background-size: cover;
  -webkit-background-size: cover; 
  -moz-background-size: cover;
  -o-background-size: cover;
}
#cvideo, #videooverlays {
  position:absolute;
  top:0;
  left:0;
}
#cvideo, #videooverlays, video {
  width:100%;
  height:100%;
}
video {
  image-fit:fill;
  object-fit:fill;
}
#vid_top {
  position:relative;
  top:50px;
  width:100%;
  height: auto;
}
#vt_logo {float:left; margin-left:50px;}
#vt_url {float:right; margin-right:50px;}
#slogan {position:relative; top:70px; width:100%; height:auto; text-align:center;}
#slogan img {
  width:50%;
}
#slogan2 {position:relative; top:70px; width:100%; height:auto; text-align:center;}
#slogan2 img {
  width:50%;
}
#icons {position:absolute; bottom:0; width:100%; height:auto; text-align:center;}
#icons img {width:70%;transform:translateY(50%);}
#lipsum {width: 60%;  margin: 0 auto;}

<div id="ccontainer">
<div id="cvideo">
  <video preload="preload" autoplay="autoplay" loop="loop" muted poster="http://i.imgur.com/X3mb6AD.jpg"> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>
<div id="videooverlays">
  <div id="vid_top">
            <div id="vt_logo">
                <img src="http://i.imgur.com/Od0DZBj.png">
            </div>  
            <div id="vt_url">   
                <img src="http://i.imgur.com/ns80hYp.png">
            </div>
      <div style="clear:both;"></div>
      <div id="slogan">
        <img src="http://i.imgur.com/JrOXRf2.png">
      </div>
      <div id="slogan2">
        <img src="http://i.imgur.com/7mRLS9s.png">
      </div>
    </div>
        <div id="icons">
            <img src="http://i.imgur.com/XEEAcQx.png">
        </div>
    </div>
</div>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tortor mi. Etiam bibendum pellentesque dignissim. Cras eu massa elit. Ut sit amet metus porta, hendrerit mauris at, elementum massa. Duis malesuada ac odio id faucibus. Mauris malesuada elementum dui luctus tempor. Integer in lacus vel risus dignissim vehicula eget vel purus. Sed non sollicitudin arcu. Cras ac ligula at nisl vulputate fringilla et non est. Etiam placerat volutpat eros id facilisis. Nunc sollicitudin ipsum ipsum, vestibulum rutrum sem dapibus quis.
</p>
<p>
Mauris interdum erat id posuere tempor. Vivamus suscipit nisi nec laoreet pulvinar. Vestibulum luctus libero vel tortor blandit maximus. Proin consequat massa id eros convallis rhoncus. Curabitur et erat finibus, sollicitudin mi ac, suscipit eros. Duis gravida velit elit, vel tempus elit malesuada in. Cras viverra, sapien sed tincidunt bibendum, mauris ligula tempor sem, vitae placerat libero mauris ut neque. Nullam ullamcorper erat est, at laoreet metus imperdiet nec. Nam sit amet gravida quam, nec hendrerit ante. Vestibulum eros ex, lacinia ut tincidunt quis, hendrerit ut felis. Suspendisse in orci sodales, tincidunt leo nec, lobortis dui. Integer ac magna purus. Praesent porta a dolor ut rutrum.
</p>
<p>
Curabitur ac sodales enim, vitae luctus eros. Mauris ac accumsan leo. Vestibulum tristique pretium nibh vel interdum. Duis vitae velit vel neque pretium condimentum. Vestibulum id lacus a nisl rhoncus tempus. Nullam varius quis tellus eget pharetra. Aliquam vitae purus id ex sodales bibendum sed quis dui. Ut bibendum neque turpis, ut vehicula massa egestas eget. Ut maximus sapien a leo porttitor dignissim. Suspendisse varius iaculis turpis non pulvinar. Morbi sit amet pellentesque nulla. Ut non ipsum quis mauris rhoncus luctus. Praesent posuere tincidunt nisl, at rutrum magna aliquet ac. Praesent et ex id sapien rhoncus ultricies non at orci. Donec vel iaculis metus. Donec convallis sit amet nisi id faucibus.
</p>
<p>
Phasellus id commodo risus, ut faucibus elit. Integer ornare blandit magna, ac pharetra neque porta nec. Maecenas consectetur, odio ac maximus fringilla, libero tellus egestas leo, in vulputate elit risus non nulla. Maecenas ac tempor sem. Phasellus placerat sollicitudin orci. Nunc sit amet tellus at sapien semper consequat at quis libero. Duis auctor in tortor sit amet congue.
</p>
<p>
Nunc at venenatis felis. Maecenas in lobortis tortor. Aenean id metus mattis, sodales dui non, ornare est. Donec nec condimentum lorem. Nullam ac nisi consequat, venenatis lorem quis, suscipit tortor. Cras a posuere ex, sodales pellentesque leo. Nulla nibh lectus, tincidunt non metus sit amet, rutrum fringilla quam. Cras id condimentum lectus. Donec et nulla turpis. Duis et nisi iaculis, aliquet orci sit amet, porta massa. Donec finibus vulputate lacus et mattis. Integer laoreet eros ut cursus porta. Proin id lectus elit. Proin imperdiet nec arcu at imperdiet.
</p></div>