Overview
Videos are used to deliver focused instructional content and demonstrations. They should be presented clearly and prominently, using responsive embeds and consistent sizing, so learners can easily view and engage with the material without distraction.
Common Pitfalls to Avoid
- Embedding supplemental or optional videos directly on the page
- Using embed code other than the designated embed code
- Modifying the designated embed code to adjust size or layout
- Embedding videos inside nested containers (tip boxes, callouts, accordions, tabs)
[Example]
CDD Tag
<video></video>
Designated Embed Code
Use the code below for video embeds.
For YouTube videos, replace the [youtube video id] with the videos code (found in video’s URL).
For other videos, replace the whole URL in the src=" " code line.
<div style="position: relative; max-width: 900px; margin: 0 auto;">
<div style="padding-bottom: 56.25%;">
<iframe
src="https://www.youtube.com/embed/[youtube video id]"
title=""
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
scrolling="no"
frameborder="no"
allowfullscreen>
</iframe>
</div>
</div>Guidelines
Do
ID
Embed videos only when they serve as primary content
Videos should be embedded only when they deliver core instructional content that learners are expected to engage with as part of the lesson. This ensures that embedded videos are intentional, accessible, and central to the learning experience.
ID
Link to supplemental video content instead of embedding it on the page
When videos are supplemental rather than essential to learning, provide them as external links instead of embedding them directly on the page.
Production
Use the designated embed code for all embedded videos
The designated embed code establishes a consistent, responsive baseline that supports perceivability and accessibility across devices and screen sizes. Using a single embed method ensures predictable behavior and alignment with WCAG‑informed design decisions.
Do Not
ID
Embed videos that function only as supplemental or optional content
Supplemental videos should not be embedded directly on the page, as embedding implies instructional priority and can create unnecessary accessibility and layout complexity.
ID
Production
Embed videos inside other containers (e.g., tip boxes, callouts, accordions, or tabs)
Embedding videos within nested containers can interfere with responsiveness, perceivability, and predictable interaction, particularly for learners using assistive technologies. Instead provide an external link.
Production
Modify or override the designated embed code
Changing the embed code can break responsiveness and undermine the accessibility baseline the code is designed to provide.