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 (no 404s); (3) the width and height attributes or CSS dimensions are set to prevent layout shift while the poster loads; (4) the poster image accurately represents the video content (not a clickbait or unrelated image).

Fix

(1) Add a poster attribute to each <video> element: <video poster='thumbnail.jpg' controls>. (2) Use an image that represents the video content — typically a frame from the video, a title card, or a branded thumbnail. (3) Ensure the poster image has the same aspect ratio as the video (usually 16:9). (4) Recommended poster dimensions: 1280×720px minimum for HD video; 640×360px is acceptable for smaller embeds. (5) Host the poster image at a CDN-cached URL to ensure fast loading. (6) Also set width and height on the <video> element to prevent CLS.