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

YouTube Modal Snippets


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.

 

Available Settings

LAUNCH-BUTTON-COLOR
Changes the color of the button that launches the modal, WKU Red button or Gray button. (Options: RED, GRAY, or RED-OUTLINE)

LAUNCH-BUTTON-SIZE
Controls the size of the button that launches the modal. (Options: SMALL, MEDIUM, OR LARGE)

LAUNCH-BUTTON-TEXT
Changes the text of the button that launches the modal.

YOUTUBE-ID
Selects the YouTube video to display inside the modal. See the following section about Locating the YouTube Video ID.

VIDEO-TITLE
Title of the YouTube video to display inside the modal. Displays in a tooltip over the .

CUSTOM-COVER-IMAGE
Size: 1200x675
Optional. 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.

 

Locating the YouTube Video ID

The video ID can be found in the address bar of your browser when viewing the video directly on youtube.com. The ID of the video is located after ?v=. The full URL will look something like, https://www.youtube.com/watch?v=-FdwTsYsFQw. In the case of this video the ID would be -FdwTsYsFQw

The YouTube Video ID outlined in red, found in the address bar of your browser after ?v=.

The YouTube Video ID is located in the URL which can be found in your browser's address bar after ?v=.  Outlined in red above.




Example #1 - Custom Cover Image (Medium Button)

When creating this snippet you may find that your video does not have a thumbnail due to the video quality, and will see a default gray image provided by YouTube. You can overcome this by creating a custom cover image.


YouTube Modal Snippet
LAUNCH-BUTTON-COLOR GRAY
LAUNCH-BUTTON-SIZE MEDIUM
LAUNCH-BUTTON-TEXT Watch a Video
YOUTUBE-ID Dy58ANOPrA8
VIDEO-TITLE Climb With Us
CUSTOM-COVER-IMAGE Climb With Us



Example #2 - Small Button

If your video is high-definition or higher quality a cover image may be generated for you. If your snippet shows a gray pixelated image, your video was too low quality for YouTube to generate one and will need to use the CUSTOM-COVER-IMAGE option instead.


YouTube Modal Snippet
LAUNCH-BUTTON-COLOR RED
LAUNCH-BUTTON-SIZE SMALL
LAUNCH-BUTTON-TEXT Another Video
YOUTUBE-ID -FdwTsYsFQw
VIDEO-TITLE Sunrise over Cherry Hall
CUSTOM-COVER-IMAGE



Example #3 - Large Button


YouTube Modal Snippet
LAUNCH-BUTTON-COLOR RED-OUTLINE
LAUNCH-BUTTON-SIZE LARGE
LAUNCH-BUTTON-TEXT Watch the Tutorial
YOUTUBE-ID dQw4w9WgXcQ
VIDEO-TITLE Gotcha
CUSTOM-COVER-IMAGE

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

 Last Modified 2/2/18