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

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

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

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

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

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

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

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

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

Управление меню в Drupal

Октябрь 28, 2016 г.

Меню в Drupal тесно связано с навигацией по сайту, построением хлебных крошек, картой сайта. Этот обзор посвящен инструментам и возможным проблемам при ...

Читать

Ошибка MySQL Incorrect datetime value: '0000-00-00 00:00:00'

Февраль 16, 2023 г.

Появляется, если поле типа datetime уже содержит подобные нулевые значения при попытке изменить как тип поля (через alter table), так и сами значения в таблице. Вероятно ошибка возникает, если вы импортировали данные в вашу базу. Скорее всего из-за ...

Читать

Убираем пустые категории из фильтра во views

Сентябрь 13, 2023 г.

Весьма распространённый случай, когда в качестве exposed filter используется поле, связанное с таксономией. Так вы получаете набор опций в фильтре для своего представления, которое доступно пользователю. Также весьма часто некоторые дополнительные ...

Читать

Как получить bounds, зная центр области и радиус?

Февраль 20, 2019 г.

Да, речь идет о map.google.api. Типичная задача преобразования, т.к. многие объекты и службы карт Гугл работают с bounds, а на практике задача ставится исходя из центра и области. Для перевода воспользуемся объектом гугл: google.maps.Circle. ...

Читать
 

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

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



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