, содержащий видео фона для конкретного div

Question

Я изо всех сил пытаюсь разместить видео-фон в div. У div также есть высота 500 пикселей и ширина 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 видео (не обязательно все видео на дисплее). Что я делаю не так?

Answer 1

video { 
    width: 100vw; 
} 

#cms_vid удалить высоту

Answer 2

путь я вижу ваши проблемы, у толкать свой фон в час: 500px и вес: 100%;

, но как насчет вашего размера файла? это подходит? если это не так, это будет плохая форма.

1-е решение, размер фона: 100% 100%; , но он будет растягиваться, если у вас есть видео в длину. или он будет растягиваться также в мобильном режиме, если у вас есть расширенный размер видео.

2-е решение на моей скрипке.

но в очередной раз это зависит от того, как ваше видео выглядит, расширяется? или по длине? это все равно парадоксально.

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

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

, возможно, это поможет вам. :)

Answer 3

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