Вы можете отображать HTML5 <video> в качестве полноэкранного фона?

Ответ 1

Используйте position:fixed на видео, установите его на 100% ширину/высоту и положите на него отрицательный z-index, чтобы он отображался за всем.

Если вы посмотрите VideoJS, элементы управления - это только элементы html, сидящие поверх видео, используя z-index, чтобы убедиться они выше.

HTML

<video id="video_background" src="video.mp4" autoplay>

(Добавьте источники webm и ogg для поддержки большего количества браузеров)

CSS

#video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1000;
}

Он будет работать в большинстве браузеров HTML5, но, вероятно, не iPhone/iPad, где нужно активировать видео и не нравится над ним.

Ответ 2

Просто комментарий по этому вопросу - я использовал HTML5-видео для полноэкранного фона, и он работает с удовольствием - но обязательно используйте либо высоту: 100%, либо ширину: авто или наоборот - чтобы убедиться, что вы сохраняйте пропорции.

Что касается Ipads - вы можете (видимо) сделать это, скрыв, а затем заставляя событие клика загореться, а функция события щелчка запускает Load/Play().

Ps - это не должно требовать никаких плагинов и может быть выполнено с минимальным JS. Если вы настроите таргетинг на любое мобильное устройство (я бы предположил, что вы могли бы...), избегая любой такой структуры, это путь вперед.

Ответ 3

Возможно, мне немного поздно ответить, но это будет полезно для новых людей, которые ищут этот ответ.

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

Недавно я попал в эту проблему, и нашел решение, используя медиа-запросы.

Вот учебник, который я написал о том, как создать Полноэкранный видеоролик только с CSS

Я также добавлю код:

HTML:

<div class="videoBgWrapper">
    <video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
        <source src="videosfolder/video.webm" type="video/webm">
        <source src="videosfolder/video.mp4" type="video/mp4">
        <source src="videosfolder/video.ogv" type="video/ogg">
    </video>
</div>

CSS

.videoBgWrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.videoBg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
  .videoBg{
    width: 100%;
    height: auto;
  }
}
@media (max-aspect-ratio: 16/9) {
  .videoBg {
    width: auto;
    height: 100%;
  }
}

Надеюсь, вы сочтете это полезным.