[Mobile View] Padding and/or Margin Around Video Embed and Header

[Brantley]

Hey there,

I’m looking for a little help with a site that I built for a client. The site is https://McGeheeBibleStudy.com and on mobile devices, the header padding is odd and nothing I do to adjust changes anything.

Also, right now I have one post and am displaying the posts as the homepage. The first post has an embedded video that looks fine on the desktop. However, on mobile, as the video resizes, it adds a large white space above the video…not sure if that’s padding or margin. Is there any way to correct it?

Thanks

[Elvin]

Hi Brantley,

The embedded iframe not being set to be responsive for mobile viewport is the cause of the issue.

You can modify your embedded video to become responsive by trying this code.

<div style="position:relative; width: 100%; overflow: hidden; padding-top: 56.25%;">
<iframe src="https://player.vimeo.com/video/456737242" frameborder="0" allowfullscreen="allowfullscreen" style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;"></iframe>
</div>

You can also get the responsive embed code directly from Vimeo by selecting Size:Responsive shown here.
https://share.getcloudapp.com/p9uG9EZq

[Brantley]

Awesome! Thanks for your help, that fixed it.

I’m marking this as resolved.

[Elvin]

Good to know. Nice one!

No problem. Always glad to help.:)

[Author]

Posts