📹Атрибут poster для тега

Атрибут poster в HTML-теге задаёт изображение-заставку, которое показывается до начала воспроизведения видео. Это как обложка у книги - первое, что видит пользователь.

Ваш браузер не поддерживает видео.

❗Что важно учитывать

☑️Размер и соотношение сторон. Лучше всего, когда размер постера совпадает с размерами видео - иначе браузер растянет или сожмёт картинку, и может появиться некрасивая рамка. Например, для видео 1920×1080 используйте постер такого же разрешения или пропорций 16:9.

☑️Вес файла. Постер загружается раньше видео, поэтому он должен быть лёгким. Имеет смысл сжать JPG или использовать WebP - пользователь увидит заставку быстрее.

☑️Отсутствие постера. Если poster не указан, браузер покажет либо пустой чёрный прямоугольник, либо первый кадр видео (поведение зависит от браузера и атрибута preload).

Практический пример:

Здесь preload="metadata" в паре с poster - хорошая комбинация: браузер не качает само видео заранее, но сразу показывает красивую заставку.