Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 12, 2018 at 12:07 pm #1032558
    roamingk

    Hi
    When I embed a Facebook Video in a blog post, it looks fine on a desktop, but on a mobile it seems to add double the height resulting in a lot of white space below the video.

    You can see an example here:

    https://www.gaytravel4u.com/7-gay-summer-escapes-for-the-winter/

    Here is the embed code. I am using the latest Enfold and using the code box to embed the code.

    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fgaytravel4u2%2Fvideos%2F337218113723487%2F&width=720&show_text=false&appId=262487383782910&height=720" width="720" height="720" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe>

    November 15, 2018 at 12:53 pm #1033913
    Nikko

    Hey roamingk,

    That’s because the height is set to 720 in the embed code.
    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:479px) {
  #top .avia_codeblock iframe {
    max-height: 320px;
  }
}

    Hope this helps.

    Best regards,
    Nikko

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