Фоновое видео для сайта (HTML5)
Укажите адрес видео (MP4 или WebM) и изображения-обложки. Код уже содержит атрибуты, которые браузеры требуют для автоматического воспроизведения.
Как пользоватьсяВидео в фоне верхней части
Доступно на: 
Фоновое видео для сайта (HTML5): для чего нужен
Короткое видео, играющее в фоне верхней части сайта, сразу показывает атмосферу, продукт или услугу. Чтобы оно работало на телефоне, видео должно быть без звука и иметь атрибуты muted, autoplay и playsinline.
Генератор собирает секцию с тегом video в MP4 и WebM, обложкой, настраиваемым тёмным слоем для читаемости текста, заголовком и текстом и кнопкой паузы, как требует WCAG для контента, движущегося дольше 5 секунд. Для тех, кто просил меньше движения, видео сразу начинается на паузе.
Как пользоваться
- Укажите адреса видео и изображения-обложки.
- Напишите заголовок и текст и настройте тёмный слой.
- Скопируйте код и вставьте в верх страницы.
Когда использовать
- Верх сайта ресторана или отеля.
- Лендинг мероприятия.
- Страница агентства недвижимости или фитнес-клуба.
Частые вопросы
Почему видео не воспроизводится само на телефоне?
Браузеры разрешают автовоспроизведение только видео без звука. Видео должно иметь атрибуты muted, autoplay и, на iPhone, playsinline, иначе оно откроется на весь экран или не заиграет. В коде уже есть все три.
Какой размер файла использовать?
Фоновое видео должно быть коротким (10–20 секунд в цикле) и лёгким, желательно меньше 3–5 МБ, в 720p или 1080p без звука. Сожмите перед публикацией: тяжёлое видео замедляет загрузку на телефоне.
А как быть тем, кто предпочитает меньше движения?
Для тех, кто включил в системе уменьшение движения, скрипт ставит видео на паузу, и остаётся только обложка. Есть и кнопка паузы, которую WCAG требует для контента, движущегося дольше 5 секунд.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.