Facebook Pixel YouTube Embed Snippet | Western Kentucky University Skip to main content

YouTube Embed Snippet


Embedded content is inherently not very responsive, and in turn may not display as expected on mobile devices, or devices with smaller screen sizes. One of the most popular embeds is a YouTube video on a page. To overcome the responsive problem this snippet allows you to create a cleaner and responsive youtube embed from only the YouTube ID and a Title. It can also be placed anywhere on a page, including side columns, and will respond to the width.

 

Available Settings

YOUTUBE-ID
Your video's id, found in the url of the video - see section "Locating the YouTube Video ID" below for more information.

VIDEO-TITLE
The title of your video, used for alternate text before the video is loaded.

CUSTOM-COVER-IMAGE
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.

 

Cover Image Sizes
Page Layout
1 Column 2 Column Main 3 Column Main Side Column
1200x675 888x500 575x323 575x323

 

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

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.

Climb With Us Video Preview

 

YouTube Embed Snippet
YOUTUBE-ID Dy58ANOPrA8
VIDEO-TITLE Climb With Us
CUSTOM-COVER-IMAGE Climb With Us

 


 

Example #2 - YouTube Provided Cover Image

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.

Sunrise Over Cherry Hall Video Preview

 

YouTube Embed Snippet
YOUTUBE-ID -FdwTsYsFQw
VIDEO-TITLE Sunrise Over Cherry Hall
CUSTOM-COVER-IMAGE

 


 

Example #3 - Columns

By default responsive items typically fill 100% of the width where they are placed. If you want a smaller video embed, combine this snippet with a column snippet and the video will respond to a column's width. You can leave the additional columns empty for a single smaller video, or add any content to the remaining columns including another video.

Sunrise over Cherry Hall Video Preview
 

 

Two Column Responsive Snippet

ALIGN-CENTER YES
YouTube Embed Snippet
YOUTUBE-ID -FdwTsYsFQw
VIDEO-TITLE Sunrise over Cherry Hall
CUSTOM-COVER-IMAGE
 



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 9/14/18