How do I make my embedded YouTube video responsive?

Last updated: May 8, 2018

Applies to:

Marketing Hub 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 {
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 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 Embed.
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

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?

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