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

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

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

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

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

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

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

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

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

Nivoslider, практика использования

Ноябрь 14, 2014 г.

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

Читать

Увеличить timeout в Mocha

Январь 5, 2023 г.

Тайм-аут, установленный в мокке по умолчанию равен 2сек, чего вполне достаточно для большинства тестов. Если вам не хватает, то используйте при вызове дополнительный параметр --timeout, время задаётся в мс, например, 10 секунд: [crayon-68ccbce27a5c6368748621/] ...

Читать

Wordpress, Яндекс и другие. Штрихи SEO.

Март 29, 2010 г.

Не устану повторять, что wordpress  уже давно перерос возможности блогового движка. Но по умолчанию он сконфигурирован именно для блоговых целей и чихает на то как устроены поисковые системы и их требования. Можно бесконечно говорить о том, что сама ...

Читать

Вариант XML карты сайта для Drupal 7

Ноябрь 8, 2016 г.

Сначала написал вариант для Drupal 6, но в силу актуальности семерки, предлагаю вариант кода для 7й версии. Описание вы найдете в прошлой статье, здесь обновлена только работа с базой данных. Привожу код класса и пример его вызова. Код класса: ...

Читать
 

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

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



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