Generate video element optimized for use as background media. Adds common background styling attributes and uses poster optimization.

Generate a video with an optimized poster image using modern formats.

The poster is rendered as an overlay using element, providing WebP/AVIF support that the HTML5 video poster attribute doesn’t support natively.

The poster image is hidden once the video starts playing.

Usage: video-with-picture-poster {:src ‘media/clip.mp4’ :loop true :muted true} {:poster ‘media/clip.jpg’ :alt ‘Video preview’}

Generates sibling elements in the caller’s containing block: - An optimized element as poster (uses WebP/AVIF) - The

Keeps the native poster as a fallback and hides the overlay on playback.

Generate a

Usage: video {:src ‘media/clip.mp4’ :loop true :muted true} video {:src ‘media/clip.mp4’ :poster ‘img/poster.jpg’ :controls true}

Generates:

Note: The :poster attribute uses the original image path. For optimized posters with WebP/AVIF support, use video-with-picture-poster instead.

Browsers automatically select the first format they support.