To embed YouTube videos in the site, add a link with a class .youtube-video-embed and the href pointing to the YouTube page (can be a full link or a short link). The .youtube-video-embed class can also be applied to the parent element. The link (and its surrounding paragraph, if present) will be replaced with the appropriately-sized video.

When the page is resized, the iframe dimensions will be resized to fit the parent's width. The video is always set to use a 16:9 aspect ratio.

At the time of writing, YouTube video URLs usually come in three flavours:

  • Regular form,
  • Long form,
  • Short, sharable form,

General use

Watch the video here

<p><a class="youtube-video-embed" href="">Watch the video here</a></p>


<div class="c-video"><iframe width="730" height="410.625" src="//" allowfullscreen=""></iframe></div>

Example with options

Watch the video here

<p><a class="youtube-video-embed" data-autoplay="1" data-mute="1" data-cc_load_policy="1" href="">Watch the video here</a></p>

Long form url example

The following example uses the longer form URL type with more parameters added to the query string,


Watch the video here

Sharable, short form URL example

Finally, this example uses the shorter, shareable URL,


Watch the video here

Demo inside a modal

Trying out a version inside a modal for the mixed media rows content type.

Open the modal