Add thumbnail images to videos

Without a poster image, a <video> element displays as a blank black rectangle until the first frame is loaded. This is visually jarring, provides no context about the video content, and can cause layout shift (CLS) if the video dimensions are not specified separately. A good thumbnail image communicates the video topic at a glance, allows users to decide whether to play, and improves the page's visual quality — especially on slow connections where video preloading is delayed.

Quick Reference

• Add a poster attribute to <video> elements with a URL to a representative thumbnail image
• The poster image displays before the video loads and while the user decides whether to play
• Poster images improve perceived performance by showing meaningful content before video data arrives
• The poster should accurately represent the video content — deceptive thumbnails violate user trust
• Use an image ratio matching the video's aspect ratio (typically 16:9) and a resolution of at least 1280×720

Check

Find all <video> elements. For each, check that: (1) a poster attribute is present with a non-empty URL; (2) the URL resolves to a valid image (…