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

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

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

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

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

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

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

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

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

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

Если не работают ЧПУ для drupal под nginx...

Июль 16, 2014 г.

Арендовал у netangels "облачный VDS" и решил попробовать их образ Debian Wheezy Nginx + PHP (php-fpm). С Nginx дела до тех пор не имел, потому с некоторыми настройками пришлось разбираться с чистого листа. На самом деле, единственный вопрос, с ...

Читать

Устанавливаем, настраиваем, русифицируем WP-POLLs плагин для пользовательских голосований в WP

Июль 20, 2016 г.

В репозитории плагинов Wordpress вы найдете много готовых плагинов, которые позволят вам проводить опросы/голосования на сайте. Почему стоит выбрать WP-polls? Плагин прост, функционален и переведен на многие языки. То на сколько он оказался востребован ...

Читать

 

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

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



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