Есть ли способ просто покрыть страницу фоновым видео в CSS? - PullRequest
Новая
       8

Есть ли способ просто покрыть страницу фоновым видео в CSS?

0 голосов
/ 29 апреля 2018

(я только изучаю CSS, поэтому, пожалуйста, не кричите на меня>.> ...) У меня довольно большое HD-видео, которое я хотел поместить в фоновом режиме. Сначала я настроил 

#video-background {      
      position: fixed;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -1000;
      background-size: cover;}

HTML: 

<video preload="auto" autoplay loop="loop" id="video-background" muted="muted">
  <source src="bg3.mp4" type="video/mp4">
  <script>
  document.getElementById('video-background').playbackRate=0.4;
  </script>
</video>

Я пробовал разные методы, чтобы изменить его, например, изменить background-size на contain, добавить object-fit: cover, некоторые другие решения, которые я нашел на SO ... Затем я изменил min на max для ширины и высоты (я не знаю, почему я не сделал этого, во-первых, это имеет смысл ...)

Так что теперь видео умещается на экране, но из-за соотношения сторон у меня пустое место сбоку.

Есть ли способ подогнать видео так, чтобы оно соответствовало либо высоте, либо ширине экрана, а затем уходило за пределы экрана, насколько это необходимо для поддержания соотношения сторон? Другими словами, как минимизировать размер видео, сохраняя при этом охват всего экрана (даже если некоторые его части обрезаются)?

Я решил, что на данный момент самый простой способ - просто установить max-width на 100%: | и удалить любую ссылку на высоту ... но я не уверен, что отношение ширины к высоте для любого стандартного разрешения больше, чем у видео. Но это должно работать, пока это правда.

Редактировать: я вижу, что мое временное решение не очень хорошо для того, когда вы масштабируете саму страницу% \ ... как, если вы делаете разделенный экран. Тогда видео остается на полную ширину, но теперь есть пробелы сверху и снизу>. <..... <em>gruuuuunt

...