Tickster Styleguide

Appearance

Video ​

When to use it ​

The Video component is used to embed videos in your web pages. It's suitable for YouTube/Vimeo clips where a fixed aspect ratio is required.

What it looks like ​

Code examples ​

html
<div class="c-video">
    <div class="c-video__body">
        <iframe loading="lazy" src="https://www.youtube.com/embed/2G3eSwHmtLs" frameborder="0" title="YouTube video" allowfullscreen>
            <a href="https://www.youtube.com/embed/2G3eSwHmtLs">View video on YouTube.com</a>
        </iframe>
    </div>
</div>

Accessibility notes ​

If you have control over the video content, try to ensure that the video element has appropriate text alternatives. Use the <track> element to provide captions for the video. This helps users who are deaf or hard of hearing to understand the content of the video. Additionally, make sure that the video controls are accessible via keyboard navigation.

If you're just embedding YouTube clips (which, let's face it, is the common scenario), at least make sure there is a link to the original URL within the <iframe> element within this component.