YouTube Modal Component

---

The YouTube modal snippet allows you to hide a styled YouTube Embed off-screen in a minimal modal dialog window that is called by pressing an accompanying button. This modal window features no header or footer around the video, and is brought on top of the entire page and navigation with a dark background effect.

 

Component Fields

---

YouTube URL

The link to the YouTube video you wish to embed.

 

Video Title

The title of your video, used for accessibility purposes.

 

Custom Cover Image (Optional)

Recommended Size: 1200x675

A generated cover image is brought in from YouTube, however lower definition videos may not have one. Insert a custom image to override the default YouTube cover image. Images must be uploaded to the CMS and published first.

WARNING - lower quality or non-HD videos may not have a generated cover image provided from YouTube. If you see a gray default image displaying you will want to insert a Custom Cover Image.

 

Button Text

The text that appears inside the button. Keep this text brief and clear. Use a video title such as "Highlight Reel" or use calls to action like "Watch Video" (maximum of 32 characters)

 

Button Size

The size of the button. By default buttons are medium sized, use large buttons in main content areas and small buttons in side columns and cards with limited space.

• Small
• Medium (Default)
• Large

 

Button Style

The color or style of the button.

• WKU Red (Primary)
• Gray Outline (Secondary)
• WKU Red Outline

 

Full Width (Optional)

Makes the button fill the width of the content area. This is great for small spaces like cards or side columns. Avoid using this style in very wide areas like the main content area.

• Yes
• No(Default)

 

 

Examples

---

Example 1

This example embeds the YouTube video "Sunrise over Cherry Hall" with the provided cover image.

Watch the Sunrise

YouTube URL: https://youtu.be/-FdwTsYsFQw
Video Title:  Sunrise over Cherry Hall
Custom Cover Image: N/A
Button Text: Watch the Sunrise
Button Size: Medium (Default)
Button Style: WKU Red (Primary)
Full Width Button: No

 

 

Example 2

This example uses a large button in the red outline style. It embeds the YouTube video "Climb With Us" and uses a custom cover image.

Climb With Us

YouTube URL: https://www.youtube.com/watch?v=Dy58ANOPrA8
Video Title:  Climb With Us
Custom Cover Image: /oucampus/images/test-custom-cover.jpg
Button Text: Climb With Us
Button Size: Large
Button Style: WKU Red Outline
Full Width Button: No

 

 

Example 3

This example uses a small button in the secondary style.

Watch the Tutorial

YouTube URL: https://youtu.be/dQw4w9WgXcQ
Video Title:  Watch the Tutorial
Custom Cover Image: N/A
Button Text: Watch the Tutorial
Button Size: Small
Button Style: Gray (Secondary)
Full Width Button: No