Как получить видеоизображение высоты и ширины видового экрана?

Question

Я хочу, чтобы мой сайт воспроизводил видео, которое занимает полный видовой экран. Не 100% тела, только окно просмотра. Таким образом, вы можете прокручивать вниз и просматривать другой контент. Подобно тому, как это делает mediaboom.com.

Мне удалось сделать видеоизображение в полном окне просмотра (и не более), к чему я стремлюсь. Но это не отзывчиво. Значение видео должно оставаться центрированным при изменении размера окна. Но он обрезается.

Вот что я имею в HTML до сих пор:

<div id="featured"> 
     <video poster="assets/poster.jpg" autoplay="true" muted="true" loop> 
      <source src="assets/home.mp4" type="video/mp4" /> 
     </video> 
</div> 

И в CSS:

body, html { 
margin: 0px; 
padding: 0px; 
} 

#featured { 

max-height: 100vh; 
overflow: hidden; 
text-align: center; 
} 


video { 
    min-width: 100%; 
    min-height: 100%; 

} 

Answer 1

В отличие от object-fit: fill/cover, это одна работа на IE/Edge, а

Fiddle demo

html, body { 
 
    margin: 0; 
 
} 
 
#wrapper{ 
 
    position: relative; 
 
    height: 100vh; 
 
    overflow: hidden; 
 
} 
 
#featured { 
 
    position: absolute; 
 
    width: calc(100vh * (1000/562)); /* video width/height */ 
 
    height: calc(100vw * (562/1000)); /* video height/width */ 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
video { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="wrapper"> 
 
    <div id="featured"> 
 
    <video poster="assets/poster.jpg" autoplay="true" muted="true" loop> 
 
     <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" /> 
 
    </video> 
 
    </div> 
 
</div>

Answer 2

Вы можете использовать объект-FIT: покрытие в вашем CSS, только загвоздка в том, что нет никакой поддержки IE. Это, фактически, то же самое, что и размер фона: обложка, хотя! https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Answer 3

Я не уверен, правильно ли получил ваш вопрос, но я попробовал изменить ваш код min-width: 100%; и min-height: 100%; для ширины: 100%; и высота: 100%; и окно изменится правильно.

EDIT:

Я сожалею, но я не знаю, где искать в mediaboom.com есть много вещей там.

Но если вы хотите:

• Чтобы сохранить соотношение сторон видео.
• Сделайте видео с высоким разрешением, которое позволяет вам просматривать.
• Crop ширину видео, если это необходимо, но сохранить видео в центре
• Добавьте больше элементов под видео DIV, которые вы можете достичь с помощью прокрутки

Тогда попробуйте с этим. Если это не решение, оно может приблизиться:

body, html { 
      margin: 0px; 
      padding: 0px; 
      width: 100%; 
     } 

     #featured { 
      width: 100wh; 
      height: 100vh; 
      position: relative; 
     } 


     video { 
      width:100wh; 
      height: 100Vh; 
      display:inline-block; 
      position: absolute; 
      top:50%; 
      left:50%; 
      margin-right: -50%; 
      transform: translate(-50%,-50%); 
     }