Cookies on

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content


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.

Example Video contents


{% from "components/video/_macro.njk" import onsVideo %}
        "videoEmbedUrl": '',
        "videoLinkURL": '',
        "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

videoEmbedUrlstringtrueThe embed URL to the video hosted on YouTube or Vimeo, for example,{ video ID } or{ video ID }
videoLinkUrlstringtrueThe URL to the video hosted on YouTube or Vimeo, for example,{ video ID } or{ video ID }. Used to link to the video when cookies are not enabled
titlestringtrueSet a descriptive title for the video set by the HTML title attribute of the embedded video <iframe>
linkTextstringtrueThe text to be shown when cookies are not enabled e.g. “Watch the {title} on Youtube”
imageObject<Image>trueAn object containing path attributes for the video cover image when cookies are not enabled
smallSrcstringtruePath to the non-retina version of the image
largeSrcstringfalsePath to the retina version of the image
altstringfalseThe HTML alt tag to explain the appearance and function of the image. Not required if the image is only decorative


<div class="ons-video ons-js-video">
  <a href=""
    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="" focusable="false" aria-hidden="true">
          transform="translate(-2 -1.99)" />
          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="" 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>

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)