Как отложить загрузку видео
Для нативного файла задайте preload="none"; для тяжёлого iframe используйте доступный click-to-load facade. Сохраните размеры, fallback и первый клик — пользователь не должен нажимать Play дважды.
Самый безопасный путь
Сообщение разработчику
«Для каждого видео определите native video или iframe. Нативному видео без autoplay задайте preload=none и poster; стороннему iframe сделайте доступный click-to-load facade с фиксированным aspect-ratio, title, fallback-ссылкой и consent. До клика не должно быть запросов к провайдеру, после первого клика плеер должен загрузиться и запуститься, если браузер разрешает».
Сохраните исходную разметку, URL видео, параметры плеера и события аналитики. Подготовьте локальный poster с разрешёнными правами, правильным кадрированием и размерами; не используйте внешний thumbnail без согласованной политики.
Выберите подходящий режим
| Ситуация | Паттерн | Что проверить |
|---|---|---|
| Свой MP4/WebM с controls | preload="none" + poster | Первый Play, диапазонные запросы, форматы |
| iframe ниже первого экрана | loading="lazy" | Запросы начинаются возле viewport |
| Тяжёлый YouTube/Vimeo embed | Click-to-load facade | Нет provider-запросов до клика |
| Видео необязательно встраивать | Poster + внешняя ссылка | Новая вкладка и понятная подпись |
Пошаговая настройка фасада
- Создайте контейнер с тем же aspect ratio, что и итоговый плеер.
- Поместите внутрь адаптивный poster, подпись и настоящий
button type="button"с доступным именем «Воспроизвести: название». - Храните URL iframe в безопасном
data-*или создавайте его из разрешённого идентификатора; не вставляйте непроверенный HTML. - По клику замените фасад iframe с
title,allowи только нужными permissions. Передайте autoplay лишь в рамках этого пользовательского жеста. - Перенесите фокус в плеер или сообщите о загрузке; при ошибке оставьте повтор и внешнюю ссылку.
- Если требуется согласие, до него не запрашивайте poster/API у третьей стороны; после согласия сохраните понятный следующий шаг.
- Проверьте мышь, Enter/Space, screen reader, узкий экран, медленную сеть, повторный запуск и аналитику.
<video controls preload="none" poster="/media/preview.webp"
width="1280" height="720">
<source src="/media/demo.webm" type="video/webm">
<source src="/media/demo.mp4" type="video/mp4">
<a href="demo.mp4">Скачать видео</a>
</video>Риски и откат
- Не используйте
autoplay="false": наличие boolean-атрибута всё равно означает autoplay; удалите атрибут. - Не запускайте загрузку на hover как единственный путь — его нет на touch и клавиатуре.
- Не превращайте картинку в несемантическую кнопку без фокуса и имени.
- Не удаляйте captions, controls, privacy-параметры и аналитику без согласования.
- Не откладывайте hero-video вслепую: poster может стать LCP и требует собственного приоритета.
Для отката верните исходную разметку, очистите кеш и повторите сценарии. Затем выполните независимую проверку. Транскодирование, субтитры, монтаж и медиахостинг относятся к отдельным работам.
