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.
Your video's id, found in the url of the video - see section "Locating the YouTube Video ID" below for more information.
The title of your video, used for alternate text before the video is loaded.
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
|1 Column||2 Column Main||3 Column Main||Side Column|
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 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.
|YouTube Embed Snippet|
|VIDEO-TITLE||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.
|YouTube Embed Snippet|
|VIDEO-TITLE||Sunrise Over Cherry Hall|
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.
Two Column Responsive Snippet