VIDEO EMBED: 16:9 poster + native player / iframe slot
VARIANTS: Poster + play | Native video | Iframe embed | In a profile card
.video-embed is layout/chrome only — no player JS. It's a
tw:aspect-video rounded box (matches the listing-card media-box radius);
drop in a poster image + play affordance, a native <video>, or a
provider <iframe> and it fills the frame.
Poster + Play Affordance
Poster + play: A static "watch" thumbnail — no in-page playback, no
JS. Wrap the whole .video-embed in an <a> that links out
to the actual video (a lightbox or new tab). The dark scrim + white circular play icon
appear automatically whenever .video-embed-play is present.
<a class="video-embed" href="..." aria-label="Play video: ..."> <img class="video-embed-poster" alt="" src="..."> <span class="video-embed-play" aria-hidden="true"><i class="fa-solid fa-play"></i></span></a>
Native Video
Native video: A real <video controls poster="...">
element — the browser supplies its own play button and controls, so no
.video-embed-play overlay is used here.
<div class="video-embed"> <video controls poster="..."><source src="..." type="video/mp4"></video></div>
Iframe Embed
Iframe embed: A provider embed (YouTube/Vimeo). The iframe is
absolutely positioned to fill the same 16:9 frame — always give it a descriptive
title. This preview uses a static srcdoc stand-in rather
than a live provider embed, so the showcase doesn't pull in a third party's own
markup/accessibility surface — in a real page, point src at the actual
YouTube/Vimeo embed URL.
<div class="video-embed"><iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="..." allowfullscreen></iframe></div>
In a School-Profile Card
Profile context: Composed inside a regular .card —
the video is content like any other section, not a bespoke layout.
Welcome from our Headteacher
2 min watch — recorded September 2026.
Quick Reference
Frame: .video-embed (tw:aspect-video, rounded 8px, no player JS)
Poster: .video-embed-poster (full-cover <img>)
Play affordance: .video-embed-play (centered white circle; auto-adds a dark scrim to .video-embed)
Native/iframe: a plain <video> or <iframe> inside .video-embed fills the frame automatically