Hola! ¡Tenemos nuestra Comunidad en Español!

Video sizing on landing page

SOLVE
New Contributor

Hello, I have a landing page that I need help with. Our template has a Rich Text module in the left module which contains content and a YouTube video embedded. The right side contains a form module. Everything is functioning properly, and the page, including the video is responsive, however the video seems to be lagging when responding which causes an overlap between the form and the video. This only happens at a certain size, but it's visible when loaded on a small laptop screen. Is there anything we can do to fix this? https://info.unisonglobal.com/insight-acquisition-planning-w_3.20.19 

Screen Shot 2019-04-04 at 9.59.51 AM.png

 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Regular Advisor

Thanks @jennysowyrda !

 

The video has a fixed with of 540px until the media query kicks in at screens that are 1023px and smaller to set it to 100%: 

 

max-width.jpg

 

You can increase that to where it's overlapping (about 1150px) in your CSS. In this case perhaps the quickest workaround would just add it in between style tags to the head of this particular page, like this: 

 

<style>
  @media (max-width: 1150px) {
    iframe { width: 100%; }
  }
</style>

I hope that helps!

 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

2 Replies
Community Manager

Hi @kaitlynwells,

 

I want to tag in some subject matter experts to see if they have any tips for this. @Anton@Stephanie-OG, do you have any thoughts on how to resolve this issue? 

 

One resource I found that may assist with this matter is this article which discusses adding padding and border to an embedded video.

 

Thank you,
Jenny


Did my post help answer your query? Help the Community by marking it as a solution
Highlighted
Regular Advisor

Thanks @jennysowyrda !

 

The video has a fixed with of 540px until the media query kicks in at screens that are 1023px and smaller to set it to 100%: 

 

max-width.jpg

 

You can increase that to where it's overlapping (about 1150px) in your CSS. In this case perhaps the quickest workaround would just add it in between style tags to the head of this particular page, like this: 

 

<style>
  @media (max-width: 1150px) {
    iframe { width: 100%; }
  }
</style>

I hope that helps!

 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!