Чаще всего превью видео не показывается по одной из трёх причин: не задан атрибут poster у видеоплеера, браузер блокирует автовоспроизведение и не успевает отрисовать кадр, либо файл видео отдаётся с CORS-ошибкой или по незащищённому http на https-странице. Разберёмся по порядку.
Почему браузер не показывает превью
Тег <video> сам по себе не генерирует миниатюру — он показывает либо первый кадр (если браузер успел его декодировать), либо картинку из атрибута poster. Если poster не указан или ссылка на него битая, вместо превью будет чёрный прямоугольник или пустое место. Ещё одна частая причина — сервер отдаёт видеофайл с неверным MIME-типом (например, text/plain вместо video/mp4), и браузер вообще отказывается его обрабатывать.
Если видео встроено с внешнего хранилища или CDN, возможна CORS-ошибка: домен сайта не указан в разрешённых источниках, и браузер молча блокирует загрузку кадра предпросмотра, хотя сам файл может быть доступен по прямой ссылке.
Как проверить, в чём именно проблема
- Откройте консоль разработчика (F12 → Console) и обновите страницу — ошибки CORS, 404 или mixed content видны сразу.
- Во вкладке Network найдите запрос к видеофайлу и картинке poster, проверьте код ответа (200, а не 403/404) и Content-Type.
- Проверьте, не блокирует ли загрузку расширение браузера (адблокер часто режет видео с внешних CDN).
- Откройте прямую ссылку на видео в новой вкладке — если оно не проигрывается и там, проблема на стороне хранилища, а не верстки.
Что делать, если превью так и не появляется
Добавьте явный атрибут poster с абсолютным путём к jpg/png-картинке — это самый надёжный способ гарантировать превью независимо от того, смог ли браузер декодировать первый кадр видео. Для WordPress-сайтов на стандартном видео-блоке миниатюра генерируется автоматически при загрузке через медиабиблиотеку; если видео добавлено через сторонний плеер или iframe, миниатюру нужно задавать вручную в настройках блока.
Если видео хранится на внешнем сервере, убедитесь, что там настроены корректные CORS-заголовки (Access-Control-Allow-Origin) и файл отдаётся по https, если сама страница на https — иначе браузер заблокирует контент как небезопасный. Также стоит проверить, не превышает ли файл лимиты хостинга по размеру или битрейту: некоторые хостинги обрезают или не отдают тяжёлые видео полностью, из-за чего кадр для превью не успевает загрузиться.
Если после всех проверок превью всё равно не появляется, попробуйте временно заменить видео на статичную картинку-заглушку с явной ссылкой на видеофайл — это подтвердит, что дело именно в способе встраивания, а не в хостинге.