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

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

  • This topic has 3 replies, 2 voices, and was last updated 2 weeks ago by Elvin.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1438698
    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

    #1438732
    Elvin
    Customer Support

    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

    #1439229
    Brantley

    Awesome! Thanks for your help, that fixed it.

    I’m marking this as resolved.

    #1439772
    Elvin
    Customer Support

    Good to know. Nice one!

    No problem. Always glad to help.:)

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.