Use up and down keys to navigate results once you've typed more than two characters. Use the enter key to select a result. Touch device users, explore by touch or with swipe gestures.
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.
{% from "components/video/_macro.njk" import onsVideo %}
{{
onsVideo({
"videoEmbedUrl": 'https://www.youtube.com/embed/OwYVwPPxPj4',
"videoLinkURL": 'https://www.youtube.com/watch?v=OwYVwPPxPj4',
"image": {
"largeSrc": '/patternlib-img/youtube-example-cover.png',
"smallSrc": '/patternlib-img/youtube-example-cover.png',
"alt": "Youtube video"
},
"title": 'Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL',
"linkText": 'Watch “Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL“ 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=OwYVwPPxPj4"
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 “Transforming the way we produce statistics | Explaining the
Dynamic Population Model | BSL“ on Youtube</span>
</span><span class="ons-external-link__icon"> <svg class="ons-icon" viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden=true role="img" title="ons-icon-external-link">
<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/OwYVwPPxPj4"
title="Transforming the way we produce statistics | Explaining the Dynamic Population Model | BSL"
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>