COS-Pages-Editor

How do I make my embedded YouTube video responsive?

Last updated: April 28, 2016

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise

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-youtube {

position: relative;

padding-bottom: 56.25%; /* 16:9 Aspect Ratio */

padding-top: 25px;

}

.hs-responsive-embed-youtube iframe {

position: absolute;

width: 100%!important;

height: 100%!important;

}

 

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 the Blog, Landing Page, or Site Page editor.
  • In a rich text module, click Insert > 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 that 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>