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 youtu.be 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,
https://www.youtube.com/watch?v=_8pUffDWFlM - Long form,
https://www.youtube.com/watch?v=_8pUffDWFlM&index=1&list=... - Short, sharable form,
https://youtu.be/_8pUffDWFlM
General use
<p><a class="youtube-video-embed" href="https://www.youtube.com/watch?v=s67Nb0wpcbE">Watch the video here</a></p>
…becomes…
<div class="c-video"><iframe width="730" height="410.625" src="//www.youtube.com/embed/e0BLUg7LtiE?rel=0" allowfullscreen=""></iframe></div>
If the youtube-video-embed class ends up on a span...
<p><span class="youtube-video-embed"><a href="https://youtu.be/M3swMh4Ab4U?t=2334">Watch the video here</a></span></p>
Example with options
<p><a class="youtube-video-embed" data-autoplay="1" data-mute="1" data-cc_load_policy="1" href="https://www.youtube.com/watch?v=kAE-2AZ-ApE">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,
e.g. https://www.youtube.com/watch?v=_8pUffDWFlM&index=1&list=PLqL9vrHSa70NmzsSg36tnv0dqEueEbifj
Sharable, short form URL example
Finally, this example uses the shorter, shareable URL,
e.g. https://youtu.be/G1RFzsCjEYg?t=1m
Thumbanils for older videos
Older videos don't always have the sddefault size placeholder image available. To cover this case there's an event listener that waits for the image to load to check it. If it detects the 120x90 fallback image that YouTube serves up then it swaps out the image src for the hqdefault version which is more likely available.
The video below is known not to have our preferred sddefault placeholder image variant.
Demo inside a modal
Trying out a version inside a modal for the mixed media rows content type.