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

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

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

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

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

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

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

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

Написать комментарий

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

Проверка кодов ОГРН / ОГРНИП на PHP

Сентябрь 24, 2015 г.

Продолжая тему валидаторов, публикую код двух функций для проверки введенных пользователем кодов ОГРН или ОГРНИП. Проверка кода ОГРН. Код содержит 13 знаков, последний из них используется для проверки "контрольной суммы". [crayon-5bf03279525d4881203326/] ...

Читать

Отправка HTML писем из Drupal 7

Август 27, 2015 г.

В семерке поменяли кое что в плане отправки писем, и то что работало в 6ке, в 7ке уже «не катит». Разберем два аспекта отправки писем: HTML формат ...

Читать

 

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

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



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