Как подстроить размер постера HTML5 видео под размер видео

Быстрый ответ

Если вы хотите, чтобы размер постера соответствовал размеру видеоформата, то указывайте атрибуты width и height при применении тега <video>, и создавайте постер в этих же пропорциях. Ниже представлен пример этого кода:

<video width="320" height="240" poster="poster.jpg" controls>
  <source src="video.mp4" type="video/mp4">
</video>

Для создания постера подстройте его размеры под 320x240 пикселей и внесите аналогичные размеры в CSS-стили для обеспечения визуальной согласованности.

Чтобы постер полностью прикрыл видеоконтент, используйте свойство CSS object-fit:

video {
  object-fit: cover; // идеально вписанный элемент 🧩
}

Не забудьте проверить поддерживаемость свойства object-fit в разных браузерах, так как в некоторых из них, к примеру, в Internet Explorer, оно может не функционировать!

Поддержка адаптивности и правильного соотношения сторон

Применение CSS-фона с прозрачным изображением в качестве постера

В случае, если требуется использовать нестандартное изображение постера, вы можете применить прозрачное изображение и установить фон через CSS. Пример данного подхода представлен ниже:

video {
  background: url('poster.jpg') center center / cover no-repeat;
}

В качестве атрибута poster используйте base64-закодированное 1-пиксельное прозрачное изображение:

<video poster="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" controls>
  <!-- не забудьте указать источники видео! -->
</video>

Обеспечение совместимости с различными браузерами

С помощью тега <source> можно указать различные форматы видео, что улучшит совместимость с разными браузерами:

<video poster="poster.jpg" controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Если браузер не поддерживает свойство object-fit, вместо него можно использовать абсолютно позиционированный тег <img>, размещённый под тегом video.

Тонкая настройка подхода с учётом оптимизации и эстетики

Ускорение начальной загрузки

Для того чтобы видео не запускалось автоматически, используйте аргумент preload="none" и примените отложенную загрузку для постера.

Адаптивное оформление содержимого

Поклонникам адаптивного дизайна предлагается указывать размеры видео в процентах:

video {
  width: 100%;
  height: auto;
  background-size: cover; // универсальный подход!
}

Сохранение пропорций постера

Выбирайте пропорции постера так, чтобы они были идентичны исходным пропорциям видео, или используйте object-fit: fill для растягивания постера до размеров видео.

Примеры из практики

Тестирование — ключевой момент в работе веб-разработчика. Инструменты, такие как Инспектор в Google Chrome, могут помочь вам в реальном времени отладить CSS-стили.

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

video {
  background-size: 100% 100%; // идеальное соответствие!
}

Для элегантного решения вы можете встроить изображение постера непосредственно в HTML используя data URI схему:

<video poster="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/..." controls>
   <!-- источники -->
</video>

Полезные материалы

1. Видео и аудиоконтент – Изучение веб-разработки | MDN — подробное руководство по использованию видео и аудио в HTML5.
2. Идеальное изображение на весь экран | CSS-Tricks — методы для изображений или постеров, заполняющих весь экран.
3. HTML video poster Attribute – W3Schools — документация по атрибуту poster для тега <video>.
4. Сохранение соотношения сторон div с помощью CSS – Stack Overflow — обсуждение способов сохранения пропорций посредством CSS.
5. Can I use... Support tables for HTML5, CSS3, etc — таблицы поддержки видео в HTML5 браузерами для проверки их совместимости.
6. Создание внутреннего соотношения для видео – A List Apart — статья о создании пропорций для встроенного адаптивного видео.
7. Адаптивные изображения | Статьи | web.dev — описание подходов к созданию видео и изображений с возможностью адаптации.