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

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.

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.

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