Single Video
Video blocks allow you to easily embed responsive videos in your markup using YouTube video IDs. Below is an example of what a video block looks like while it is fetching data from the YouTube API.
Loading state:
<div class="video js-video"> <div class="video__media responsive-media-16x9 is-loading"></div> <p class="video__caption u-nudge">Loading...</p> <!-- add more (or less) markup here if you wish --> </div>
In order to render the video, provide a YouTube video ID to the data-video-id attribute. Optionally, you can also provide a custom caption below the video title and a “cta” (call to action) which will appear as text next to the play button.
Rendered:
<div class="video js-video"
data-video-id="tbyv2K64GGE"
data-caption="My Caption"
data-cta="My CTA">
<div class="video__media responsive-media-16x9 is-loading"></div>
<p class="video__caption u-nudge">Loading...</p>
</div>
<!-- Source: https://youtu.be/tbyv2K64GGE -->
Video Playlists
You also have the option of embedding a YouTube video playlist which will dynamically load paginated video embeds.
Below is a markup example of a video-playlist block. Provide the YouTube user name to the data-user attribute and the playlist ID to the data-playlist attribute.
<!--
CLASSNAMES
required :
'video-playlist js-video-playlist'
optional :
'video-list--large-first' : enlarges the first video in the list to full width.
'u-push' : provides a top margin to the video-playlist block.
SOURCE :
-->
<div class="video-playlist video-list--large-first u-push js-video-playlist"
data-user="CGUNews"
data-playlist="PLhqg559k1eTseaI0JRhYCPvmc8wu0CSrc">
<div class="h5">Art at Claremont Graduate University</div> <!-- optional -->
<div class="video-playlist__wrap u-push u-clear"> <!-- required -->
<!-- videos will be rendered here -->
</div>
<button class="button video-playlist__load-more u-push">Load More</button> <!-- required -->
</div>