0
225
2019-01-01

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

Рассмотрим как создать видео фон, который полностью покрывает элемент, используя iframes и медиа запросы включая видео фон находящийся в фиксированном блоке. Плюс примеры на CSS и JS. Читаем, пост вымучен и выстрадан долгими часами работы с видео бекграундами.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

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

Если Вы хотите реализовать "человеческий" видео бекграунд, видео в котором будет всегда располагаться по центру и не иметь черных полос при масштабировании по вертикали (сверху и с низу) и по горизонтали (слова или справа). Видео бекграунд который находится в элементе <video> страницы и занимает всю область просмотра. Значит мой многострадальный труд был проделан не зря и Вы в нужном месте. А значит читаем внимательно и до конца. Комментарии приветствуются, благодарности тоже ;).

И так начнем! Когда мне потребовалось реализовать видео бекграунд чтобы полностью покрыть фоновую область просмотра видео роликом, я решил, что мне придется использовать 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 (см. Таблицу поддержки «Могу ли я использовать» ). Небольшая заметка о поддержке прошлого и будущего:

В любом случае, сейчас это не будет работать для наших нужд, поэтому давайте найдем работоспособное решение 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

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

Но угадайте, что работает как контейнер, который автоматически центрирует видео? <video> Элемент! Поэтому мы можем пропустить создание <div> блока и использование техник центрирования CSS! Теперь нам просто нужно сделать наш элемент видео слишком высоким или слишком широким и позволить браузеру обрабатывать центрирование автоматически и по умолчанию (по сути блок <div> по отображению получается похож на background-size:contain фонового изображения в 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%; */
  }
}

Это будет хорошо работать. Но я бы также порекомендовал использовать контейнер

для переноса видео, и дать этому контейнеру размеры области просмотра (пунктирный контур). Почему? Потому что, если вы хотите добавить скриптовые кнопки вместе с вашим видео или любыми другими метаданными или контентом, которые вы хотите отображать поверх видео во время воспроизведения, это окажется полезным. Итак, давайте используем немного более подробную конфигурацию:
<div id="SDStudio_VIDEO_BACKGROUND">
  <video controls>
    <!-- Источник видео по умолчанию: -->
    <source type="video/mp4" src="myvid.mp4"
            media="(orientation:landscape)">
    <source type="video/webm" src="myvid.webm"
            media="(orientation:landscape)">
    <!-- Используйте квадратный источник видео, чтобы тратить меньше трафика: -->
    <source type="video/mp4" src="myvid_square.mp4"
            media="(orientation:portrait)">
    <source type="video/webm" src="myvid_square.webm"
            media="(orientation:portrait)">
  </video>
  <!--
    Кнопки или метаданные идут сюда
  -->
</div>

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

Я не буду подробно описывать эти варианты использования и решения, но вам нужно будет соответствующим образом адаптировать медиа-запросы и, возможно, ваш код инициализации JavaScript.

Полностью рабочий и "человеческий" вариант для адаптивного видео фона

Хотя эта техника довольно приятна, на самом деле она более надежна чем только применение object-fit (особенно для очень высоких или очень широких областей просмотра). В будущем он также может работать лучше в Chrome или в браузерах; поскольку он создан для такого рода вещей, разработчики браузеров могут оптимизировать его, а не нашу слегка хакерскую технику.

Поскольку мы планируем и будущее, а также нацеливаемся на последние выпуски Chrome, мы можем использовать @supports правило в CSS для определения object-fit поддержки и переопределения некоторых стилей.

Рабочий пример применения видео бэкграунда - код

#SDStudio_VIDEO_BACKGROUND {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}
#SDStudio_VIDEO_BACKGROUND > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* 1. Если не поддерживает support: */
@media (min-aspect-ratio: 16/9) {
  #SDStudio_VIDEO_BACKGROUND > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  #SDStudio_VIDEO_BACKGROUND > video { width: 300%; left: -100%; }
}
/* 2. Если поддерживает object-fit, overriding (1): */
@supports (object-fit: cover) {
  #SDStudio_VIDEO_BACKGROUND > video {
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
  }
}

И ... Вот и все! Возможно, вы захотите посмотреть страницу примера и изменить размер окна вашего браузера во время воспроизведения видео.

Фиксированный видео фон с использованием Scrollify.js + Vide.js

Пример который будет предоставлен в конце данного пункта, это сырой пример с применением всего что я описал Выше, на основе которого создан видео бекгрунд (видео фон) моего основного сайта http://sdstudio.top/. С той разницей что идентификатор #SDStudio_VIDEO_BACKGROUND был применен к секции созданной при помощи конструктора страниц ELEMENTOR. Но для того что бы описать каким именно образом осуществить применение видео бэкграунда в ELEMENTOR'E я считаю правильным написать отдельный пост,и уже не сегодня.... Как не как третий час ночи :).

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

ПС. Отдельное спасибо автору данного поста: https://fvsch.com/video-background/