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

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

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

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

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

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

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

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

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

Задача о поиске лучшей сделки

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

Это еще одна классическая задача программирования о поиске некой лучшей пары чисел в массиве. Задача формулируется следующим образом. Есть массив стоимости ...

Читать

Функция сравнения двух строк на PHP

Август 1, 2017 г.

Насколько похожи две строки? В PHP для выяснения подобия строк есть две функции - similar_text() и levenshtein(). Первая из них считает процент ...

Читать

Отсутствующие переводы в tmgmt

Сентябрь 26, 2024 г.

При не верной настройке провайдера переводов, может случаться следующая проблема - часть текстовых полей полностью или частично оказывается не переведена. ...

Читать

Найти элемент по его классу в HTML на чистом js

Май 4, 2020 г.

Немного ванильного js, на этот раз: как найти контейнер по указанному классу. Сразу рассмотрим более сложный пример, когда требуется найти элемент с классом .class-child внутри элемента .class-parent. В DOM мы используем функцию element.getElementsByClassName(CLASSNAME), ...

Читать
 

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

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



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