Archived topic
[Mobile View] Padding and/or Margin Around Video Embed and Header
3 replies · Started by Brantley on September 10, 2020
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
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
Awesome! Thanks for your help, that fixed it.
I'm marking this as resolved.
Good to know. Nice one!
No problem. Always glad to help.:)
