CMS Development

Wills9797
Membro

Issues with Youtube Videos being re-sized

resolver

Hi everyone, 

 

I am attempting to create a landing page with multiple Youtube videos on to be used as a step by step guide.

 

The videos show up fine in the editor view but when previewed/sent live, the videos shrink and go into a letterbox shape.  Regardless of what I try within the module, nothing seems to fix it. 

 

Has anyone encountered this?

 

Thanks for any help in advance. 

Will 

 

1 Solução aceita
stefen
Solução
Conselheiro(a) de destaque | Parceiro
Conselheiro(a) de destaque | Parceiro

Issues with Youtube Videos being re-sized

resolver

The common issue I run into with this is due to a bug in HubSpot's default "modules.css"

 

The issue is with the following starting at line 17 in the modules.css file:

/* Embed Container (iFrame, Object, Embed) */
.hs-responsive-embed {
position: relative;
height: auto;
overflow: hidden;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}

.hs-responsive-embed iframe, .hs-responsive-embed object, .hs-responsive-embed embed {
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: 2%;
}

To fix this, just add the following in your own stylesheet to overwrite these rules: 

/* Embed Container (iFrame, Object, Embed) */
.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%;
}

Alternatively, you can replace the default "modules.css" with your own CompanyModules.css as recommended in HubSpot's Boilerplate CSS. Also, if you have embeds that have aspect ratios other than 16x9 you might want to look into using something like fitvids.js

Stefen Phelps, Community Champion, Kelp Web Developer

Exibir solução no post original

9 Respostas 9
MKoemans
Membro

Issues with Youtube Videos being re-sized

resolver

hi, its 7 years later now 2023, and i experience same issue. i embed the url from teh youtube video into a blog and it shrinks the framesize / looks unprofessional.

Thanks if you fix this.

Mark

0 Avaliação positiva
gabriel-nextiny
Orientador(a) | Parceiro Diamante
Orientador(a) | Parceiro Diamante

Issues with Youtube Videos being re-sized

resolver

Hi Will, 

 

We usually use responsive tables (scaffolding) for any kind of videos to make sure they look great on desktop and mobile.

 

Here's an article that explains how to use it:

http://getbootstrap.com/2.3.2/scaffolding.html

 

This page is an example of 2 videos side by side using a responsible table.

 

The code usually goes like this, where AAAA would be the code of your first youtube video and BBBB the second one. Now, if you want to have margings and space between them you can add more span sections. Just remember to make them all add to 12.

 

6-6

4-4-4

1-5-5-1

1-4-2-4-1

and so on.

 

If you just want to have one video per row, you can just create 1-10-1 rows.

 

<div class="row-fluid">

<div class="span6">
AAAAA
</div>

<div class="span6">
BBBBB
</div>

</div>

I hope this helps. Let me know if you have any questions.

G

0 Avaliação positiva
aburkart
Participante

Issues with Youtube Videos being re-sized

resolver

Hi!

 

Is anyone else having an issue inserting a video via a youtube link into their blog posts and the video being resized? Is there a fix for blogs not just landing pages?

 

Thanks!

Jon-Law
Participante

Issues with Youtube Videos being re-sized

resolver

I get the same issue with YouTube video embeds on the blog.
It's a letterbox.
I added the code to the main style sheet, and it went even thinner!

HELP!

stefen
Solução
Conselheiro(a) de destaque | Parceiro
Conselheiro(a) de destaque | Parceiro

Issues with Youtube Videos being re-sized

resolver

The common issue I run into with this is due to a bug in HubSpot's default "modules.css"

 

The issue is with the following starting at line 17 in the modules.css file:

/* Embed Container (iFrame, Object, Embed) */
.hs-responsive-embed {
position: relative;
height: auto;
overflow: hidden;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}

.hs-responsive-embed iframe, .hs-responsive-embed object, .hs-responsive-embed embed {
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: 2%;
}

To fix this, just add the following in your own stylesheet to overwrite these rules: 

/* Embed Container (iFrame, Object, Embed) */
.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%;
}

Alternatively, you can replace the default "modules.css" with your own CompanyModules.css as recommended in HubSpot's Boilerplate CSS. Also, if you have embeds that have aspect ratios other than 16x9 you might want to look into using something like fitvids.js

Stefen Phelps, Community Champion, Kelp Web Developer
MRF
Participante

Issues with Youtube Videos being re-sized

resolver

Where do you find the module.css? Is it in design manager?

0 Avaliação positiva
ndwilliams3
Conselheiro(a) de destaque

Issues with Youtube Videos being re-sized

resolver

Yes it is in Design Manager in the theme Hubspot created for you. It will be in Coded Files / Custom / page / Your_Theme_Folder

0 Avaliação positiva
ndwilliams3
Conselheiro(a) de destaque

Issues with Youtube Videos being re-sized

resolver

I ran into the same issue a couple month's ago and can comfirm that @stefen suggestion will solve the issue.

0 Avaliação positiva
roisinkirby
Equipe de Produto da HubSpot
Equipe de Produto da HubSpot

Issues with Youtube Videos being re-sized

resolver

Hey @Wills9797 are you able to provide links to both the page and the YouTube video you are using in this case?

0 Avaliação positiva