Video

Use the video component to display video content hosted on YouTube or Vimeo.

How it works

An image and link to the video are displayed if the user has not accepted “campaigns” cookies.

When these cookies are accepted, the image and link is replaced with the embedded video.

By default, all but essential cookies are rejected to prevent YouTube or Vimeo setting their own cookies without the user’s consent.

Important information:

If the example below shows an image and link and you would like to view the embedded video, accept all cookies through the banner example on the cookies pattern page, then reload this page.

Nunjucks

{% from "components/video/_macro.njk" import onsVideo %}
{{
    onsVideo({
        "videoEmbedUrl": 'https://www.youtube.com/embed/_EGJlvkgbPo',
        "videoLinkURL": 'https://www.youtube.com/watch?v=_EGJlvkgbPo',
        "image": {
            "largeSrc": '/patternlib-img/youtube-example-cover.png',
            "smallSrc": '/patternlib-img/youtube-example-cover.png',
            "alt": "Youtube video"
        },
        "title": 'Census 2021 promotional TV advert',
        "linkText": 'Watch “Census 2021 promotional TV advert“ on Youtube'
    })
}}

Nunjucks macro options

Name	Type	Required	Description
videoEmbedUrl	string	true	The embed URL to the video hosted on YouTube or Vimeo, for example, `https://www.youtube.com/embed/{ video ID }` or `https://player.vimeo.com/video/{ video ID }`
videoLinkUrl	string	true	The URL to the video hosted on YouTube or Vimeo, for example, `https://www.youtube.com/watch?v={ video ID }` or `https://vimeo.com/video/{ video ID }`. Used to link to the video when cookies are not enabled
title	string	true	Set a descriptive title for the video set by the HTML `title` attribute of the embedded video `<iframe>`
linkText	string	true	The text to be shown when cookies are not enabled e.g. “Watch the {title} on Youtube”
image	`Object<Image>`	true	An object containing path attributes for the video cover image when cookies are not enabled

Image
Name	Type	Required	Description
smallSrc	string	true	Path to the non-retina version of the image
largeSrc	string	false	Path to the retina version of the image
alt	string	false	The HTML `alt` tag to explain the appearance and function of the image. Not required if the image is only decorative

HTML

<div class="ons-video ons-js-video">
  <a href="https://www.youtube.com/watch?v=_EGJlvkgbPo"
    class="ons-external-link ons-video__link ons-js-video-placeholder ons-u-db" target="_blank" rel="noopener">
    <span class="ons-external-link__text">
      <img class="ons-video__img ons-u-mb-xs"
        srcset="/patternlib-img/youtube-example-cover.png 1x, /patternlib-img/youtube-example-cover.png 2x"
        src="/patternlib-img/youtube-example-cover.png" alt="Youtube video" loading="lazy">
      <span class="ons-video__link-text ons-u-mt-xs">Watch “Census 2021 promotional TV advert“ on Youtube</span>
    </span><span class="ons-external-link__icon">&nbsp;<svg class="ons-icon" viewBox="0 0 12 12"
        xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
        <path
          d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z"
          transform="translate(-2 -1.99)" />
        <path
          d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z"
          transform="translate(-2 -1.99)" />
      </svg></span><span class="ons-external-link__new-window-description ons-u-vh"> (opens in a new tab)</span></a>
  <iframe data-src="https://www.youtube.com/embed/_EGJlvkgbPo" title="Census 2021 promotional TV advert"
    class="ons-video__iframe ons-js-video-iframe ons-u-d-no" src="about:blank" frameborder="0"
    allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Video’ component on GitHub (opens in a new tab)