Video sizing on landing page

[kaitlynwells]

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 

[jennysowyrda]

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

[Stephanie-OG · Accepted solution]

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%: 

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!