Media Embed

Third-party media rendered in the page (e.g. YouTube).

html

<div class="media-embed" style="aspect-ratio:16 / 9;border-radius:12px;">
  <svg class="media-embed__art" viewBox="0 0 400 225" width="100%" height="100%" role="img" aria-label="Conference keynote — preview thumbnail" preserveAspectRatio="xMidYMid slice"><rect width="400" height="225" fill="#241430"/><circle cx="120" cy="70" r="34" fill="#D9C8F0"/><rect x="0" y="170" width="400" height="55" fill="#24143080"/></svg>
  
  <button class="media-embed__play" type="button" aria-label="Play Conference keynote">
    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5v14l11-7z" fill="#241430"/></svg>
  </button>
  
  <p class="media-embed__title">Conference keynote</p>
</div>
<!-- Facade / "lite embed" pattern: only load the real third-party iframe once the button is
     activated, e.g. <iframe title="Conference keynote" src="https://your-video-provider.example/embed/..." allowfullscreen></iframe> -->
<style>
.media-embed { position: relative; max-width: 380px; overflow: hidden; background: #241430; display: flex; align-items: flex-end; }
.media-embed__art { position: absolute; inset: 0; }
.media-embed__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: #FAF7F2; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.media-embed__play:hover, .media-embed__play:focus-visible { background: #E8A020; outline: 2px solid #FAF7F2; outline-offset: 2px; }
.media-embed__title { position: relative; margin: 0; padding: 8px 12px; color: #FAF7F2; font: 600 13px/1.4 system-ui, sans-serif; }
</style>

tailwind

<div class="media-embed-tw relative max-w-[380px] overflow-hidden bg-[#241430] flex items-end" style="aspect-ratio:16 / 9;border-radius:12px;">
  <svg class="absolute inset-0" viewBox="0 0 400 225" width="100%" height="100%" role="img" aria-label="Conference keynote — preview thumbnail" preserveAspectRatio="xMidYMid slice"><rect width="400" height="225" fill="#241430"/><circle cx="120" cy="70" r="34" fill="#D9C8F0"/><rect x="0" y="170" width="400" height="55" fill="#24143080"/></svg>
  
  <button class="media-embed-tw__play absolute top-1/2 left-1/2 w-[52px] h-[52px] rounded-full border-0 bg-[#FAF7F2] flex items-center justify-center cursor-pointer" style="transform:translate(-50%,-50%);" type="button" aria-label="Play Conference keynote">
    <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true"><path d="M8 5v14l11-7z" fill="#241430"/></svg>
  </button>
  
  <p class="relative m-0 px-3 py-2 text-[#FAF7F2] text-[13px] font-semibold">Conference keynote</p>
</div>
<!-- Facade / "lite embed" pattern: only load the real third-party iframe once the button is
     activated, e.g. <iframe title="Conference keynote" src="https://your-video-provider.example/embed/..." allowfullscreen></iframe> -->
<style>
.media-embed-tw__play:hover, .media-embed-tw__play:focus-visible { background: #E8A020; outline: 2px solid #FAF7F2; outline-offset: 2px; }
</style>

react

export function MediaEmbed({
  title = "Conference keynote",
  aspect = "16 / 9",
  radius = 12,
  showPlayButton = true,
}) {
  return (
    <div style={{ position: "relative", maxWidth: 380, overflow: "hidden", background: "#241430",
      display: "flex", alignItems: "flex-end", aspectRatio: aspect, borderRadius: radius }}>
      <svg style={{ position: "absolute", inset: 0 }} viewBox="0 0 400 225" width="100%" height="100%" role="img" aria-label={`${title} — preview thumbnail`} preserveAspectRatio="xMidYMid slice">
        <rect width="400" height="225" fill="#241430" />
        <circle cx="120" cy="70" r="34" fill="#D9C8F0" />
        <rect x="0" y="170" width="400" height="55" fill="#24143080" />
      </svg>
      {/* Facade / "lite embed" pattern: only load the real third-party iframe once the button is
          activated, e.g. <iframe title={title} src="https://your-video-provider.example/embed/..." allowFullScreen /> */}
      {showPlayButton && (
        <button type="button" aria-label={`Play ${title}`}
          style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)",
            width: 52, height: 52, borderRadius: "50%", border: "none", background: "#FAF7F2",
            display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer" }}>
          <svg viewBox="0 0 24 24" width={22} height={22} aria-hidden="true"><path d="M8 5v14l11-7z" fill="#241430" /></svg>
        </button>
      )}
      <p style={{ position: "relative", margin: 0, padding: "8px 12px", color: "#FAF7F2", font: "600 13px/1.4 system-ui, sans-serif" }}>{title}</p>
    </div>
  );
}