78Video

The 16:9 frame for an embed or a poster. The play control is the system's one allowed scale-pop; duration sits mono in the corner on a scrim.

Use it for

Lesson videos, promo embeds
Poster + play where the player loads on demand

Not for

Ambient autoplay background video — this system does not do that

Poster + play

08:12

markup

<div class="ns-video" style="max-inline-size:26rem">
  <span class="ns-video__poster ns-ph" aria-hidden="true"></span>
  <button class="ns-video__play" aria-label="Play: What is an org?"><i class="ph ph-play" aria-hidden="true"></i></button>
  <span class="ns-video__dur">08:12</span>
</div>

Embed frame

Drop any iframe in — the frame owns ratio, border and radius.

markup

<div class="ns-video" style="max-inline-size:26rem">
  <iframe src="about:blank" title="Lesson video"></iframe>
</div>

YouTube

youtube-nocookie, no autoplay, title on the iframe. In content, pair it with a mono caption via Figure.

Lesson 01 · What is an org? · 08:12

markup

<figure class="ns-figure" style="max-inline-size:26rem;inline-size:100%">
  <div class="ns-video">
    <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Apex basics — lesson 01"
            allow="encrypted-media; picture-in-picture" allowfullscreen loading="lazy"></iframe>
  </div>
  <figcaption>Lesson 01 · What is an org? · 08:12</figcaption>
</figure>

Video modal

A poster on the page; the player loads only inside the dialog when opened — the page never carries a hidden playing embed. Esc and the scrim close it, and closing empties the iframe to stop playback.

08:12

markup

<div class="ns-video" style="max-inline-size:26rem">
  <span class="ns-video__poster ns-ph" aria-hidden="true"></span>
  <button class="ns-video__play" data-video-modal="vm-demo" aria-label="Play: What is an org?"><i class="ph ph-play" aria-hidden="true"></i></button>
  <span class="ns-video__dur">08:12</span>
</div>
<dialog class="ns-modal" id="vm-demo" aria-label="What is an org? — video" style="max-inline-size:44rem;inline-size:90%">
  <div class="ns-video" style="border:0;border-radius:0">
    <iframe src="about:blank" data-src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1" title="What is an org?"
            allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen></iframe>
  </div>
</dialog>

Accessibility contract

The play button names its video: aria-label="Play: What is an org?"
Embedded players keep captions on by default where the platform allows