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

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

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

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

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

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

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

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

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

Лишние сетевые интерфейсы в WSL Ubuntu

Февраль 5, 2025 г.

Продолжаю использовать Ubuntu (v22) на WSL 2. Не давно столкнулся с не приятным моментом. Из WSL вдруг перестала быть видимой внешняя сеть, хотя до этого ...

Читать

Считаем полное число строк в запросе MySQL, ограниченного LIMIT

Ноябрь 2, 2012 г.

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

Читать

Работа с config split модулем в Drupal

Март 16, 2024 г.

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

Читать

Переводим (русифицируем) плагин для wordpress

Январь 22, 2010 г.

Допустим вы написали плагин для wordpress. Что дальше? Можно ли как то расширить аудиторию пользователей, чтобы стяжать ещё большую славу :)? Ответ, конечно же, - да, можно. Иначе этой статьи  бы не было. Расскажу, как сделать и подключить файлы переводов ...

Читать
 

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

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



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