YouTube LazyLoad

Also known as: lazyload video, youtube video

Description

A video component that embeds and displays a youtube video on the page.

Design 

Anatomy

• The video itself is brought in via it's YouTube Embed Code which can be found in the video's URL on youtube after "v=" 
  

1. Video Title (required) - the same as the title on YouTube. Just copy and paste it directly. 
   1. If the title is really long, you can shorten it a bit and remove redundant words like "Wisconsin School of Business" or "Wisconsin MBA" at the end, since the website adds this context.
2. Video Length (optional, recommended) - type the video length in m:ss format (eg, "2:15").  Displaying this encourages users to watch the video by telling them the time commitment right away. It disappears when the video plays.
3. Play Button Color (optional) - defaults to "Light Play Button" which is white. If the video image is mostly white, you should use the "Dark Play Button" (gray) option instead. If the video image is in black and white, you can also use the "Red Play Button" option, but this option should be used sparingly.
4. Image/Thumbnail. The video thumbnail that youtube uses will be loaded in by default. 
   1. Image Override (optional) - If you don't like the youtube thumbnail (or it's not working), you can add an image here. It must be the same ratio as the youtube thumbnail, at 1176x662px (or another size at a 16:9 ratio). 
   2. Alt Text (required)- add alt text for the image here. Not required if the alt text is already on the Image Override. 

Intro/Footer fields

Most blocks come with an optional section title/header, an intro paragraph, a footer and footer link. Use these as needed. Many uses of videos do not include any of them.

Use When

• Embedding a youtube video directly onto a page, article, or spotlight

Editorial Guidelines

• Shorten the youtube video title around ~50 characters so that the whole thing is visible on mobile screen sizes. 
  • This is not required, just preferred.

Design Assets Needed

Images

Image Override (optional)

• Dimensions: 1176x662px (or another size at a 16:9 ratio).
• Keep in mind the location of the play button

Why is it called "lazy load"?

"Lazy load" is the name for asset (image, video, etc) on a website that waits to load until the user interacts with it. 

When you use this block, the video is not loaded onto the page at first, and instead loads in a photo and play button. Once the user clicks the button, the image is replaced with the video.

This ensures that the video is only loaded if the user needs it, which makes the page load faster to start. It's especially important on pages with multiple videos.

Dev Notes

The width of this block is expanded in 5 Custom Post Types – Posts, Blogs, Update, RTI, and Spotlights. Find the code for this in _layout.scss