Support component
Video frame
Responsive 16:9 embedded media treatment.
Live preview
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.
Implementation
Type: custom-html
Dependencies: Host video player embed.
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. |