Использование видео в качестве бэкграунда уже давно стало одной из фишек коммерческих сайтов. Говорят, что помогает в привлечении читателей и повышает конверсию. Неуверен, но явление имеет место быть, однако, на десктопе — эффектно, ДА, но на мобильных устройствах — категорически НЕТ!
Возникает небольшая задачка: видео должно работать на десктопе, но при заданном разрешении, например, 1024 пиксела, его быть не должно.
Решений на самом деле несколько, но самым рациональным будет следующее. Допустим, что для воспроизведения видео мы пользуем тэг video, хотя и для других вариантов решение подходит.
Итак: На странице есть такой блок:
Начинаем «танцы с плясками»: создаём контейнер, например,
А появлением video доверяем js. После загрузки страницы проверяем ширину экрана и если всё хорошо, то добавляем видео следующим кодом:
Конечно, можно попользовать и чистый CSS, например, display: none;. Видео пропадает, но видеофайл все равно будет грузиться с сервера, а оно нам надо?
Как отключить загрузку видео с сервера на мобильных устройствах?, опубликовано К ВВ, лицензия — Creative Commons Attribution-NonCommercial 4.0 International.
Респект и уважуха
