Если видео на странице не запускается, крутится вечная загрузка или вместо плеера пустой прямоугольник — чаще всего дело в одной из трёх вещей: неподдерживаемый браузером формат/кодек файла, заблокированный скриптами внешний плеер (YouTube, Vimeo, RuTube) или ошибка в вёрстке самого тега video. Проверка занимает пару минут.
Как понять, в чём причина
Откройте страницу и нажмите F12, чтобы открыть консоль разработчика браузера, перейдите на вкладку Console и на вкладку Network. Перезагрузите страницу (Ctrl+R):
- Если в консоли ошибка вида «media resource not suitable» или «no supported source» — проблема в формате видео, браузер не умеет его декодировать.
- Если запрос к видеофайлу или к iframe плеера в Network вернул 403, 404 или вообще не отправился — файл удалён, ссылка битая, либо запрос блокирует расширение или CSP-политика сайта.
- Если ошибок нет, но видео просто не отображается — вероятная причина в CSS (например, элементу выставлена высота 0 или display: none) или в JavaScript-инициализации плеера.
Видео не проигрывается из-за формата
Тег <video> в HTML5 надёжно поддерживает не любой файл с расширением .mp4, а конкретно кодек H.264 (и AV1/VP9 в контейнере webm). Если видео экспортировано в старом кодеке вроде MPEG-4 Part 2 или в контейнере .avi/.mov без переконвертации, часть браузеров откажется его показывать. Решение — перекодировать файл в mp4 (H.264 + AAC) любым конвертером, например ffmpeg, и добавить несколько источников через теги <source> с разными форматами, чтобы браузер выбрал поддерживаемый.
Внешний плеер (YouTube, VK, RuTube) не грузится
Если на сайте не воспроизводится встроенное видео из стороннего сервиса, а не свой файл, проверьте:
- не изменился ли или не был ли удалён исходный ролик у автора — тогда iframe будет пустым независимо от вашего сайта;
- не блокирует ли загрузку iframe политика Content-Security-Policy сайта (ищите в консоли ошибку «Refused to frame»);
- не мешает ли внешний скрипт блокировки рекламы или трекеров у пользователя — попробуйте открыть страницу в режиме инкогнито без расширений.
Что делать, если всё вышеперечисленное не помогло
Проверьте вёрстку: у контейнера видео не должны быть заданы нулевая высота, overflow: hidden без размеров или z-index ниже соседних элементов. Также посмотрите, не подключается ли скрипт плеера дважды — конфликт двух копий одной библиотеки (например jQuery-плеера) часто ломает инициализацию молча, без видимой ошибки в консоли. Если проект на CMS — проверьте, не обрезает ли редактор тегов видео при сохранении статьи, это частая причина исчезновения embed-кода после публикации.