包含特定 div 的视频背景答案

【问题标题】：containing a video background to a specific div包含特定 div 的视频背景
【发布时间】：2016-06-24 08:55:02
【问题描述】：

我正在努力将视频背景放入 div。 div 恰好也有 500px 的高度和 100% 的宽度，我希望视频背景适合整个 div，响应式。

HTML

<div id="dev_cms_vid_cont">
    <video id="cms_vid" loop muted autoplay poster="img/videoframe.jpg">
        <source src="'.BASE.'images/cms-bg.mp4" type="video/mp4">
    </video>
    <div id="dev_cms_cont">
         // content
    </div>
</div>';

CSS

 #dev_cms_vid_cont {
    height:500px; 
    position:relative;
 }
 #cms_vid {
    position:absolute; 
    right: 0; bottom: 0;
    min-width: 100%; 
    height: 500px;
    width: auto; z-index: 100;
    background: url(../images/home-intros.jpg) no-repeat;
    background-size: cover;
    margin: 0 auto;
 }

我不介意它是否需要 jquery 来整理，我只是希望能够有视频背景，包含在特定的 div 中，并用视频覆盖整个 div（不一定是显示的整个视频） .我做错了什么？

【问题讨论】：

标签： jquery css html html5-video

【解决方案1】：

video{position:absolute; right: 0; bottom: 0;
 min-width: 100%; height: 500px;
 width: auto; z-index: 100;
 background: url(../images/home-intros.jpg) no-repeat;
 background-size: cover;
 margin: 0 auto;}

【讨论】：

【解决方案2】：

video {
    width: 100vw;
}

#cms_vid去掉高度

【讨论】：

这只是将视频居中，视频两侧仍有很大差距，因为宽度没有消耗 100% 的 div。

【解决方案3】：

我看到你的问题的方式是，你把你的背景推到 h:500px 和 w:100%;

但是你的文件大小呢？合适吗？如果不是，那将是糟糕的形状。

第一种解决方案，背景大小：100% 100%；但如果您有纵向尺寸的视频，它会拉伸。或者如果您有加宽尺寸的视频，它在移动视图中也会拉伸。

我的第二个解决方案。

但这又取决于您的视频是什么样子的，扩大吗？还是纵向？无论如何，它都会使移动设备视图自相矛盾。

 #coverVideo {
 	height:500px;
    width:100%;
 	position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}
 #contentVideo {
	flex:0;
	min-height:100%;
	min-width:100%;}

<div id="coverVideo">
	<video id="contentVideo" loop muted autoplay poster="img/videoframe.jpg">
              <source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
    </video>
</div>

也许它可以帮助你。 :)

【讨论】：