Полностью адаптируемый видео бэкграунд. Включая примеры с JS и CSS (Full Background)

Видео бекграунд – полностью адаптивный

Если Вы хотите реализовать “человеческий” видео бекграунд, видео в котором будет всегда располагаться по центру и не иметь черных полос при масштабировании по вертикали (сверху и с низу) и по горизонтали (слова или справа). Видео бекграунд который находится в элементе.

И так начнем! Когда мне потребовалось реализовать видео бекграунд чтобы полностью покрыть фоновую область просмотра видео роликом, я решил, что мне придется использовать JavaScript, измерить область просмотра, а затем изменить размер и расположение видео соответственно полученным вычислениям.

Но после долгих мучений оказалось что в CSS, есть решение позволяющее полностью обойтись без JS. То что мы получим в итоге я сразу предоставляю ниже.

Видео бекграунд основной пример (полностью адаптируется и ведет себя как свойство background-position:cover в CSS):

Блок для видео по умолчанию

Взять <video> элемент и сделать его перекрывающим область просмотра так же просто, как с любым элементом HTML, например, с фиксированной позицией:

#myvid {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

Это заставляет наш элемент видео принимать ширину и высоту области просмотра. Но если наш видео источник имеет формат, отличный от разрешения пропорций экрана «(и это почти наверняка будет в случае , если мы используем только ширину и высоту! Окна просмотра), мы в конечном итоге получим черные полосы :

16: 9 источник видео в квадратном <video> элементе

Если вы привыкли к background-size свойству в CSS, вы знаете, что оно имеет значение «cover», которое дает именно тот эффект, которого мы пытаемся достичь здесь. Если бы мы могли использовать то же самое для изображений и видео контента при реализации задачи!

Ну, мы можем это сделать при помощи, object-fit! Увы, есть подвох.

Использование подгонки объекта

В браузерах, которые поддерживают object-fit свойство CSS, мы могли бы легко это исправить:

#myvid {
  /* Тот же код, что и раньше, выше ... */
  object-fit: cover;
}

Эта object-fit функция была разработана для всех визуальных элементов мультимедиа, включая изображения и видео. Это позволяет сообщать браузерам, как они должны помещать один прямоугольник (источник мультимедиа) в другой прямоугольник (элемент мультимедиа). В частности, он имеет cover и contain значения, которые работают так же, как аналогичные значения background-size. Также есть object-position свойство, похожее на background-position другое, за исключением того, что по умолчанию все центрировано ( object-position: 50% 50%).

Итак, object-fit делает все , что мы хотим, но … он поддерживается только в последних версиях Chrome (см. Таблицу поддержки «Могу ли я использовать» ). Небольшая заметка о поддержке прошлого и будущего:

• Впервые реализовано в Opera (прежде чем они отказались от собственного движка рендеринга)
• Недавно добавлено в Chrome (с Chrome 32)
• В Рекомендации кандидата 2012 года и Черновик редактора 2013 года эта функция помечена как «подверженная риску», хотя поддержка в Chrome может убедить W3C сохранить ее.

В любом случае, сейчас это не будет работать для наших нужд, поэтому давайте найдем работоспособное решение CSS.

Как работает видеоцентрирование? Возможны две ситуации: видео может быть переполнено по вертикали, или переполнено по горизонтали (и поиск решения на то и другое, это просто пустая трата).

Картинка может помочь:

Проблемы при масштабировании – Серый фон для видео и красные черточки для окна просмотра

Если соотношение сторон окна просмотра больше, чем соотношение сторон видео, видео будет переполнено сверху и снизу (первый пример). Если соотношение сторон окна просмотра меньше, видео будет переполнено слева и справа.

Если мы уже знаем соотношение сторон видео, мы можем кодировать это в CSS. Обратите внимание, что нам нужно жестко закодировать соотношение сторон видео в медиазапросах:

#myvid {
  position: fixed;
  top: 0;
  left: 0;
}
@media (min-aspect-ratio: 16/9) {
  #myvid {
    width: 100%;
    height: auto; /* actually taller than viewport */
  }
}
@media (max-aspect-ratio: 16/9) {
  #myvid {
    width: auto; /* actually wider than viewport */
    height: 100%;
  }
}

Благодаря этому у нас есть правильные, полностью реагирующие размеры для нашего видео, независимо от размеров области просмотра. Но и от этого наш видео бекграунд все еще не располагается по центру.

Центрирующий трюк

Мы могли бы попытаться отцентрировать видео, используя отрицательные top (или margin-top) или left (или margin-left) значения, но получить правильное количество пикселей для смещения видео не так просто. Я на самом деле пытался использовать calc() и единицы просмотра, это работало в Firefox и терпело неудачу в Chrome и Safari, и в целом это выглядело действительно загадочно. Короче не хорошее решение!

Итак, как мы можем центрировать блок с видео, который шире или выше, чем область просмотра, если мы не знаем его точных размеров? Легко! Мы делаем контейнер с большим размером, который больше, чем видео, и больше, чем область просмотра.

Вот грубая идея на картинке:

Пунктирный контур по-прежнему является нашим окном просмотра, светлый прямоугольник – нашим видео, а темная область – нашим контейнером с большим размером. Затем мы можем использовать любую технику центрирования CSS по нашему выбору (скажем, Flexbox) для центрирования видео внутри контейнера.

Но угадайте, что работает как контейнер, который автоматически центрирует видео? Поэтому мы можем пропустить создание блока и использование техник центрирования CSS! Теперь нам просто нужно сделать наш элемент видео слишком высоким или слишком широким и позволить браузеру обрабатывать центрирование автоматически и по умолчанию (по сути блок

#myvid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-aspect-ratio: 16/9) {
  #myvid {
    height: 300%; top: -100%;
    /* or height: 200%; top: -50%;
       or height: 400%; top: -150%; */
  }
}
@media (max-aspect-ratio: 16/9) {
  #myvid {
    width: 300%; left: -100%;
    /* or width: 200%; left: -50%;
       or width: 400%; left: -150%; */
  }
}

Источник записи: