containing a video background to a specific 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;
 }

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?

回答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 remove the height

回答3:

the way i see the your problem is, u push your background into h:500px and w:100%;

but what about your file size? is it fit? if it's not, it will be bad shape.

1st solution, background-size:100% 100%; but it will stretch if you have a lengthwise size video. or it will stretch too in mobile view if you have widen size video.

2nd solution at my fiddle.

but once again it depends on what your video looks like, widen? or lengthwise? it will paradoxing the mobile device view anyway.

 #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>

perhaps it help you out. :)

来源：https://stackoverflow.com/questions/38009317/containing-a-video-background-to-a-specific-div