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

YouTube Embed Component


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 component allows you to create a cleaner and responsive youtube embed from only the YouTube video URL and a Title. This component ensures that the video embedded will not slow your page loading. It can be placed anywhere on a page, including side columns, and will respond to the width.

 

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)

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.

Recommended Cover Image Sizes

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

 

 

Examples


Example 1

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

Sunrise over Cherry Hall Video Preview

  • YouTube URL: https://youtu.be/-FdwTsYsFQw
  • Video Title: Climb With Us
  • Custom Cover Image: N/A

 

 

Example 2

This example embeds the YouTube video "Climb With Us" and uses a custom cover image.

Climb With Us: WKU Video Preview

  • YouTube URL: https://www.youtube.com/watch?v=Dy58ANOPrA8
  • Video Title: Climb With Us
  • Custom Cover Image: /oucampus/images/test-custom-cover.jpg

 

 




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