Skip to main content

Video



A video is used to serve audio-visual content on a webpage to make it more engaging.

Example

Best practices

Use to break up text-heavy pages, to illustrate products for sale, or to improve storytelling on a page.

Do

  • Try and stick to the recommended aspect ratio of 16:9 for the original media. This will optimize your video content to resize across different viewports flawlessly and play well with other elements on the page.
  • Include the word "video" in the messaging when linking off from other elements into a video player. This helps set the expectations for users who might consider clicking on the element. For example, it is preferable for a link to a video of a specific product to read "Watch video" instead of "Watch", "View", or "See preview".
  • Use words such as “trailer” or “preview” only where the context of the video is clear.

Don’t

  • Don't use autoplay unless absolutely necessary. It can be an intimidating experience for users when audio-visual content starts playing automatically, even if it’s in the background.

Also known as

Video player

Related

Action trigger
Call to action

Accessibility

Options

  • Controls: To remove the controls, delete the div with the class f-video-controls and all of it's contents.
  • Autoplay: Add the attribute autoplay to the video element to initialize auto play of the video. This should be used if controls are removed.
  • Loop: Add the attribute loop to the video element to continuously loop the video. This should be used if controls are removed.
  • Mute: Add the attribute muted to the video element to mute the video. This should be used if controls are removed.
  • Options: Customize the user's video experience (info, cc, subtitles, quality, share, etc) by adding in a button with class="f-options c-glyph glyph-more" including a span with class="f-options-dialog" and the list of options shown.

Development

  • Schema definition: The video schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default Video

<div id="videoPlayer1" class="c-video" itemscope itemtype="http://schema.org/VideoObject">
    <span class="x-screen-reader" itemprop="name" id="videoPlayer1Name">Video name</span>
    <span class="x-screen-reader" itemprop="description" id="videoPlayer1Description">Short video description</span>
    <img aria-hidden="true" itemprop="thumbnailUrl" src="http://placehold.it/160x90.png" alt="Placeholder with grey background">
    <meta itemprop="uploadDate" content="2015-02-05T08:00:00+08:00">
    <video class="f-video-player" preload="auto" poster="/images/components/video/XboxOneS.png" aria-labelledby="videoPlayer1Name" aria-describedby="videoPlayer1Description">
        <source src="/videos/components/video/XboxOneS.mp4" type="video/mp4">
        <source src="/videos/components/video/XboxOneS.webm" type="video/webm">
        <source src="/videos/components/video/XboxOneS.ogg" type="video/ogg">
    </video>
    <div class="f-video-cc-overlay" aria-hidden="true"></div>
    <div class="f-video-controls f-slidein" dir="ltr">
        <button type="button" class="f-play-pause c-glyph glyph-play">
            <span class="x-screen-reader">Play</span>
        </button>
        <span aria-label="time" class="f-time">
            <span class="x-screen-reader">current time</span>
            <span class="f-current-time">00:00</span> /
            <span class="x-screen-reader">duration</span>
            <span aria-label="duration" class="f-duration">00:00</span>
        </span>
        <div class="c-slider f-progress">
            <input type="range" class="f-seek-bar" aria-label="seek-bar" value="0" min="0">
        </div>
        <button type="button" class="f-options c-glyph glyph-more" aria-label="more"></button>
        <div class="f-options-dialog" aria-hidden="true">
            <ul class="c-list f-bare">
                <li>
                    <a href="#" class="c-hyperlink">Info</a>
                </li>
                <li>
                    <a href="#" class="c-hyperlink" data-video-options="f-video-captions">CC / Subtitles</a>
                    <ul class="c-list f-bare" data-video-sub-options="f-video-captions">
                        <li>
                            <a role="button" class="c-action-trigger c-glyph glyph-chevron-left" href="#" data-video-options="back">CC / Subtitles</a>
                        </li>
                        <li id="videoPlayer1-off" aria-selected="true">
                            <a role="button" class="c-action-trigger c-glyph glyph-check-mark" href="#" data-video-selectable="true">Off</a>
                        </li>
                        <li id="videoPlayer1-en-us">
                            <a role="button" class="c-action-trigger c-glyph" href="videos/XboxOneS.en-us.ttml" data-video-selectable="true">English (US)</a>
                        </li>
                        <li id="videoPlayer1-es-mx">
                            <a role="button" class="c-action-trigger c-glyph" href="videos/XboxOneS.es-mx.ttml" data-video-selectable="true">Spanish (MX)</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="c-hyperlink" data-video-options="f-video-quality">Quality</a>
                    <ul class="c-list f-bare" data-video-sub-options="f-video-quality">
                        <li>
                            <a role="button" class="c-action-trigger c-glyph glyph-chevron-left" href="#" data-video-options="back">Quality</a>
                        </li>
                        <li id="videoPlayer1-auto" aria-selected="true">
                            <a role="button" class="c-action-trigger c-glyph glyph-check-mark" href="#" data-video-selectable="true">Auto</a>
                        </li>
                        <li id="videoPlayer1-1080">
                            <a role="button" class="c-action-trigger c-glyph" href="#" data-video-selectable="true">HD 1080p</a>
                        </li>
                        <li id="videoPlayer1-720">
                            <a role="button" class="c-action-trigger c-glyph" href="#" data-video-selectable="true">HD 720p</a>
                        </li>
                        <li id="videoPlayer1-480">
                            <a role="button" class="c-action-trigger c-glyph" href="#" data-video-selectable="true">480p</a>
                        </li>
                        <li id="videoPlayer1-360">
                            <a role="button" class="c-action-trigger c-glyph" href="#" data-video-selectable="true">360p</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="c-hyperlink" data-video-options="f-video-share">Share</a>
                    <ul class="c-list f-bare" data-video-sub-options="f-video-share">
                        <li>
                            <a role="button" class="c-action-trigger c-glyph glyph-chevron-left" href="#" data-video-options="back">Share</a>
                        </li>
                        <li id="videoPlayer1-facebook">
                            <a role="button" class="c-action-trigger" href="#">
                                <img src="images/Facebook-01.png" alt="facebook logo" class="c-image">Facebook</a>
                        </li>
                        <li id="videoPlayer1-twitter">
                            <a role="button" class="c-action-trigger" href="#">
                                <img src="images/Twitter.png" alt="twitter logo" class="c-image">Twitter</a>
                        </li>
                        <li id="videoPlayer1-skype">
                            <a role="button" class="c-action-trigger" href="#">
                                <img src="images/Skype.png" alt="skype logo" class="c-image">Skype</a>
                        </li>
                        <li id="videoPlayer1-email">
                            <a role="button" class="c-action-trigger c-glyph glyph-mail" href="#">Email</a>
                        </li>
                        <li id="videoPlayer1-copy">
                            <a role="button" class="c-action-trigger c-glyph glyph-copy" href="#">Copy link</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <button type="button" class="f-volume-button c-glyph glyph-volume" aria-label="volume"></button>
        <div class="f-volume-slider" aria-hidden="true">
            <div class="c-slider f-vertical">
                <input type="range" class="f-volume-bar f-vertical" aria-label="volume-bar" min="0" max="100" step="1" value="100">
            </div>
        </div>
        <button type="button" class="f-full-screen c-glyph glyph-full-screen" aria-label="full-screen">
            <span aria-hidden="true">Fullscreen</span>
        </button>
    </div>
</div>