Адаптивная верстка MP4 видео как фон контейнера

Это продолжение статьи о адаптивном показе видео из разных источников. Здесь я расскажу о MP4.

HTML 5 позволяет решить задачу с минимальными усилиями. Есть только одна вещь, которая заставит немного повозится. Это автозапуск ролика на мобильных.

К примеру, на iPhone X, Safari iOS в консоли браузера, вы может увидите сообщение о том, что браузер запретил воспроизведение, так как возможно пользователь не давал своего согласия на это действие.

Преодолевается это флажком controls— разрешить элементы управления. Который будем включать только для safari.

muted — выключает звук, т.к. мы используем видео как фон,
autoplay — выполняет автозапуск,
loop — повторно воспроизводит ролик после завершения,
playsinline — решает ещё одну проблему мобильных — воспроизводит видео inline, не разворачивая его на весь экран.

Осталось добавить немного стилей. Я использовал в примере класс video-js, стили применю к нему:

А вот живой пример (размеры блока на десктопе можно менять, потянув за правый нижний угол):

Мало букафф? Читайте есчо !

Как в WP получить путь к каталогу темы

Апрель 14, 2023 г.

Wordpress реализует целое семейство параметров, которые можно использовать в шаблоне. В том числе и переменные, указывающие путь к файлам темы. Разбираемся в нюансах. Ключевых переменных тут две: [crayon-68cb4608b56bc590343467/] В чем их ...

Читать

Разрыв строки во flex

Март 6, 2024 г.

В общем случае, это может быть и "разрыв столбца", зависит от выбранного направления заполнения flex контейнера (задаётся свойством flex-direction). Суть проблемы в том, что иногда требуется прекратить заполнение вдоль выбранного направления и начать ...

Читать

Изменяем число выводимых комментариев на страницу в Drupal

Май 31, 2019 г.

С комментариями в Drupal во все времена было на мой взгляд - всё сложно. В 7ке сущность стала частью конструктора, стало веселее, но общий шаблон комментариев так и остался "костью в горле" у многих программистов. В настройках типа публикации вы ...

Читать

Интеграция поиска Яндекс с сайтом на Drupal

Январь 22, 2016 г.

Вся мощь поисковой машины на вашем сайте. Это реально :). Синонимы, морфология, транслит и другие прелести, которыми вас может порадовать Яндекс, и скорее ...

Читать
 

Комментарии к «Адаптивная верстка MP4 видео как фон контейнера»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: