Facebook Pixel YouTube Modal Component | Western Kentucky University Skip to main content

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 OU Campus 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.

  • 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.

  • 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.

  • 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

 

 




Need Assistance?

The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.

Get Help



Some of the links on this page may require additional software to view.

 Last Modified 11/6/20