COS-Pages-Editor

How do I make my embedded YouTube video responsive?

Last updated: June 2, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A

To make a YouTube video responsive, add the following code to your Primary CSS file or the stylesheet being applied to your site:

/* YouTube Responsive CSS for HubSpot */

 

.hs-responsive-embed {

position: relative;
height: 0;
overflow: hidden;
padding-top: 0;
padding-left: 0;
padding-right: 0;

}

.hs-responsive-embed iframe,
.hs-responsive-embed object,
.hs-responsive-embed embed {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;

}

.hs-responsive-embed,
.hs-responsive-embed.hs-responsive-embed-youtube,
.hs-responsive-embed.hs-responsive-embed-wistia,
.hs-responsive-embed.hs-responsive-embed-vimeo {

padding-bottom: 56.25%;

}

This code will apply to YouTube videos added through the content editor's embed media function.

  • Once you have added this code, copy the share URL of the YouTube video in question.
  • Navigate to Blog, Landing Pages, or WebSite Pages.
  • Hover over the page or post, then click Edit.
  • In a rich text module, click Insert in the toolbar, then select Insert media.
Insert Media
  • Paste the YouTube video's share URL into the URL text box (you can leave the dimensions blank).
  • Click OK.
Paste video URL
Paste video URL

Any YouTube videos that you add via these steps will be made responsive.

Please note: if you choose to Embed the video instead, you must wrap the embed code with the .hs-responsive-embed-youtube class. In other words, wrap the embed code with the following tags:
<div class="hs-responsive-embed-youtube"></div>.

Was this article helpful?