Make your embedded YouTube video responsive

Last updated: October 31, 2018

Applies to:

Marketing Hub  Professional, Enterprise
Legacy Marketing Hub Basic

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-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 Media
  • Paste the YouTube video's share URL into the URL field, then click OK.
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> ).