CMS-Pages-Editor

Make your embedded YouTube video responsive

Last updated: October 31, 2018

Applies to:

Marketing Hub
marketing-basic-pro-enterprise
Basic, Professional, Enterprise

To make a YouTube video responsive, add the following CSS code to the stylesheet 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 CSS code will apply to YouTube videos added through the content editor's embed media function.

  • After adding the CSS code, copy the share URL of the YouTube video to embed.
  • Navigate to your blog, landing pages, or website pages.
  • Hover over a page or post and click Edit.
  • Locate a rich text module. Click into the module, then click Insert > Embed.
insert-embed-rich-text-editor
Insert Media
  • Paste the YouTube video's share URL into the URL field, then click OK.
embed-url
Paste video URL

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

Please note: if you select the Code option instead, you must wrap the embed code with the .hs-responsive-embed-youtube class (e.g., <div class="hs-responsive-embed-youtube"></div> ).

Was this article helpful?

If you still need help you can get answers from the , or to contact support.