先看看示例
作者提供的示例，实际效果取决于你的输入和使用工具。
输入
审查产品页视频组件，指出缺少 poster 和宽高属性导致的空白与布局偏移，并给出修复写法。
输出
预期交付：检查结论与修复后的 video 标记建议，含尺寸与海报图规范。（编辑说明，非实际运行结果）
方法说明
--- name: video-thumbnail description: "Use when applies to all `<video>` elements in HTML. The `poster` attribute specifies the URL of an image to show as a placeholder before the video is loaded or played. This is distinct from captions or audio descriptions, which are accessibility requirements. The poster is primarily a UX and performance enhancement, though the lack of a poster can indirectly create a CLS (Cumulative Layout Shift) issue if video dimensions are not declared." metadata: category: html priority: medium difficulty: beginner estimatedTime: "10" source: frontendchecklist.io url: https://frontendchecklist.io/rules/html/video-thumbnail --- # 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. ## Explain The HTML `poster` attribute on `<video>` specifies a URL for an image to display before video playback begins. When `preload='none'` or `preload='metadata'` is set (recommended for performance — avoids downloading video data on page load), no video frame is available for display, making the poster image the only visual content visible to the user before play. Without a poster, users see either a black rectangle or a browser-rendered blank video frame, which provides no context. The poster also plays a role in perceived performance — users on slow connections see meaningful content immediately rather than waiting for even the first video frame to load. ## Code Review Review templates, server-rendered HTML, and shared components that output markup related to Add thumbnail images to videos. Flag exact elements, attributes, and routes where the rendered HTML violates the rule. --- For full implementation details, code examples, and framework-specific guidance, see `references/rule.md`. Rule page: https://frontendchecklist.io/rules/html/video-thumbnail