Form elements - Video

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

How it works

By default an image and link to the video are displayed. If the user has accepted the appropriate cookies you can choose to enable the embedded video by setting allowEmbed to true.

allowEmbed is defaulted to true to prevent YouTube or Vimeo setting their own cookies without the user’s consent.

Open this default video example in new window
Copy default video code 
<div class="hs2-video hs2-js-video ">

  <a class="hs2-js-video-placeholder hs2-video__link hs2-u-display-block" href="https://www.youtube.com/watch?v=qoNn-J7F0cM">

    <img class="hs2-video__img hs2-u-margin-bottom-2" srcset="/assets/images/yt-thumbnail.jpg 1x, /assets/images/yt-thumbnail.jpg 2x" src="/assets/images/yt-thumbnail.jpg" alt="Youtube video" loading="lazy" />

    <span class="hs2-video__link-text hs2-u-margin-bottom-2">Watch &quot;Carbon Webinar Episode 5: On Track to Net Zero&quot; on Youtube</span>
    <svg class="external-link-icon hs2-u-margin-left-2" 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>
  </a>

</div>
Close default video code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default video
Name Type Required Description
Name videoEmbedUrl Type string Required true Description 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 }
Name videoLinkUrl Type string Required true Description 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
Name title Type string Required true Description Set a descriptive title for the video set by the HTML title attribute of the embedded video <iframe>
Name linkText Type string Required true Description The text to be shown when cookies are not enabled e.g. “Watch the {title} on Youtube”
Name allowEmbed Type true Required false Description If the video should be embedded.
Name image Type object Required true Description An object containing path attributes for the video cover image when cookies are not enabled
Name image{}.smallSrc Type string Required true Description Path to the non-retina version of the image
Name image{}.largeSrc Type string Required false Description Path to the retina version of the image
Name image{}.alt Type string Required false Description The HTML alt tag to explain the appearance and function of the image. Not required if the image is only decorative
Copy default video code 
{% from "video/macro.njk" import video %}
{{
    video({
    "videoEmbedUrl": 'https://www.youtube.com/watch?v=qoNn-J7F0cM',
    "videoLinkURL": 'https://www.youtube.com/watch?v=qoNn-J7F0cM',
    "allowEmbed": false,
    "image": {
        "largeSrc": '/assets/images/yt-thumbnail.jpg',
        "smallSrc": '/assets/images/yt-thumbnail.jpg',
        "alt": "Youtube video"
    },
    "title": 'HS2: on track to net zero webinar',
    "linkText": 'Watch "Carbon Webinar Episode 5: On Track to Net Zero" on Youtube'
    })
}}
Close default video code