包含特定div的视频背景 [英] containing a video background to a specific div

问题描述

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

I am struggling to place a video background into a div. The div happens to also have a height of 500px and a width of 100%, and I want the video background to fit across the entire div, responsive.

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（不一定是显示的整个视频）。我做错了什么？

I don't mind if it requires jquery to sort out, I just want to be able to have video backgrounds, contained within a specific div, and cover the entire div with the video (not necessarily the whole video in display). What am I doing wrong?

推荐答案

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;}

这篇关于包含特定div的视频背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！