Support component

Video frame

Responsive 16:9 embedded media treatment.

approved Current implementation: ISQ Rise Version introduced: 1.0.0 Platforms: Rise Owner: Design and development steward

ISQ Rise implementation preview

Rendered with the governed ISQ production Rise CSS

Light background shown; verify against a tinted or dark surface where the component is used that way in course.

Use when / avoid when

Use when

Video is the best medium for the content — movement, demonstration or human presence adds value text cannot.

Avoid when

Decorative use, or content a still image and text could communicate as well.

Anatomy

Wrapper (.isq-video)
Frame (.isq-video__frame)

States

Responsive behaviour

Maintains 16:9 at any width via aspect-ratio and object-fit, never fixed width/height.

Accessibility

Accurate synchronised captions required.
Transcript provided where it supports access, search, review or reuse.

Current implementation

Theme and platform: ISQ · Articulate Rise

Implementation type: custom-html

The classes below belong to the ISQ implementation namespace. A future theme may implement the same component contract with different tokens and class names.

Dependencies: Host video player embed.

Code

HTML

<div class="isq-video">
  <div class="isq-video__frame">
    <iframe src="about:blank" title="Video" loading="lazy"></iframe>
  </div>
</div>

Classes used: .isq-video, .isq-video__frame

ISQ production stylesheet reference →

Related items

Related patterns: —

Related components: —

Governance metadata

Owner	Design and development steward
Status	Approved
Version introduced	1.0.0
Last reviewed	2026-07
Known limitations	None recorded.