Как сделать отзывчивый видеоконтейнер div?

Question

Я пытаюсь сделать видео-контейнер div отзывчивым, но до сих пор не мог справиться.

Мой текущий CSS для видео и контейнера:

.header-container{ 
    width: 100% !important; 
    height: auto !important; 
    border-left: none; 
    border-right: none; 
    position: relative; 
    padding: 20px; 
} 

    video-container{ 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

    .video{ 
    position: absolute; 
    z-index: -1; 
    opacity: 0.78; 
    widows: 100%; 
    width: 100% !important; 
    height: auto !important; 
    margin:0 auto; 
} 

HTML:

 <div class="header-container"> 
<div class="video-container"> 
    <video preload ="true" autoplay loop = "loop" volume = "0" style="width: 100%; 
    height: auto;"> 
     <source src = "webd.mp4" type = "video/mp4" > 
     </video> 
    </div> 
</div> 

Текущий вид: Current look

Не могли бы вы сказать мне, как я могу это исправить? Я все еще новичок в HTML и CSS, и мне очень нужна ваша помощь. & совет.

Answer 1

[https://jsfiddle.net/mlegg10/fsftz8rt/4/][1]

[1]: https://jsfiddle.net/mlegg10/fsftz8rt/4/ 

/* Flexible iFrame */ 
 

 
.flexible-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 

 
.flexible-container iframe, 
 
.flexible-container object, 
 
.flexible-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<!-- Responsive iFrame --> 
 
<div class="flexible-container"> 
 
<iframe src="<source src = "webd.mp4" type = "video/mp4" >" frameborder="0" style="border:0"></iframe> 
 
</div>

Answer 2

большое количество вашего кода не связывает себя между html и css, поэтому было бы полезно понять, как это работает. Во-первых, видео не стиль из-за его ссылаются как .video в вашем CSS и ваше видео контейнер имеет противоположное со ссылкой быть видео-контейнер, без точки, чтобы ваш CSS должен выглядеть следующим образом

.header-container { 
    width: 100% !important; 
    height: auto !important; 
    border-left: none; 
    border-right: none; 
    position: relative; 
    padding: 20px; 
} 

.video-container { 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

video { 
    position: absolute; 
    z-index: -1; 
    opacity: 0.78; 
    widows: 100%; 
    width: 100% !important; 
    height: auto !important; 
    margin: 0 auto; 
} 

Для того, чтобы ответ зрения необходимо масштабировать с родительским и иметь большинство вещей с%, чтобы сделать это вам нужно добавить

position: relative; 

в все родителей

После этого необходимо удалить позицию аб растворенного вещества, как это испортит ваш стиль, сделав его объектом, который не масштабируется должным образом

Вот пример того, что я думаю, что вы имеете в виду:

https://jsfiddle.net/afut7y99/

Изменить ползунки по бокам, чтобы увидеть как он изменяется.