Video
Video
Authored Video poster, player, and caption surfaces.
Root
qp-video
Root video figure.
Children
qp-video__btn
Video activation control.
qp-video__caption
Video caption surface.
qp-video__frame
Video frame container.
qp-video__play
Play indicator within the activation control.
qp-video__player
Embedded player loaded after Video activation.
qp-video__poster
Video poster image.
Modifiers
Aspect Ratio
Resolved Video aspect-ratio mapping across poster and player states.
- 16:9 — qp-video--16x9
- 9:16 — qp-video--9x16
- 4:3 — qp-video--4x3
- 1:1 — qp-video--1x1
Example
Rendered HTML
<figure class="qp-video qp-video--16x9">
<div class="qp-video__frame">
<img class="qp-video__poster" src="/gallery-study.svg" alt="Neutral poster for the Merlin Bird ID guide" loading="lazy" decoding="async">
<button class="qp-video__btn" type="button" aria-label="Master Merlin Bird ID" onclick="qpVideoClick(this)" data-qp-video-provider="youtube" data-qp-video-id="krk8RCREK38" data-qp-video-privacy="1">
<span class="qp-video__play"><svg viewBox="0 0 64 64" aria-hidden="true" focusable="false"><path d="M26 20v24l20-12-20-12z" fill="currentColor"/></svg></span>
</button>
</div>
<figcaption class="qp-figure__caption qp-video__caption">
<span class="qp-figure__caption-line qp-figure__caption-title">Master Merlin Bird ID</span>
<span class="qp-figure__caption-line qp-figure__caption-subtitle">A video poster with a structured caption.</span>
</figcaption>
</figure>
Preview
