Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 26, 2019 at 10:53 am #1083039
    peterolle

    I just noticed that iframes block all the content in normal posts.

    The CSS is:

    iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    So when you see the post, you only see a complete black frame blocking the complete post content and a video inside.

    Why is that CSS added like that?

    This are old posts that have an iframe directly in the post, for example:

    <iframe width="670px" height="502px" src="https://www.kickstarter.com/projects/656400238/eyeclick-iphone-4-4s-camera-remote-0/widget/video.html" frameborder="0"> </iframe>

    That worked fine, but I just discover that every single post with an iframe, breaks.

    How to fix the problem?

    March 28, 2019 at 12:09 pm #1084054
    Nikko

    Hey peterolle,

    If I’m not mistaken that css is used to make sure that the video will preserve its aspect ration (width and height ratio) and also helps the videos be responsive.
    Here’s the full code used in video.css:

    .avia-video iframe, .js_active .avia-iframe-wrap iframe, div .avia-video .avia-iframe-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0;
}

    Iframe’s always have height and width set on it’s attribute, the problem with this if it’s placed in a small container let’s say 300px, the width of the iframe becomes 300px but height is still the same which is 502px.
    If you’re having issues with it, wrap it inside a div with a class of avia-iframe-wrap, example:

    <div class="avia-iframe-wrap"><iframe width="670px" height="502px" src="https://www.kickstarter.com/projects/656400238/eyeclick-iphone-4-4s-camera-remote-0/widget/video.html" frameborder="0"> </iframe></div>

    Hope this helps.

    Best regards,
    Nikko

    March 28, 2019 at 12:11 pm #1084055
    peterolle

    The thing is that I am not going to search and edit 300 posts. I need to fix it globally.

    If you create a normal post and paste the iframe code I shared, you will see the problem. This does not happen in other themes.

    So, how can I fix it globally, for all posts at once?

    Thank you.

    March 28, 2019 at 12:43 pm #1084075
    Nikko

    Hi peterolle,

    I see, I tested it on my end but I didn’t have any issue.
    Here’s a screenshot: https://imgur.com/Enh6JlH
    Can you give me a link where I can see this? I have taken a look in this link (private content) but I think it’s not the right page.

    Best regards,
    Nikko

    March 28, 2019 at 3:41 pm #1084141
    peterolle

    From result 2 to 88, you can see all of them.

    Thanks.

    March 29, 2019 at 4:54 pm #1084629
    Nikko

    Hi peterolle,

    Can you try to disable css merge and minification then flush out the cache? so it can be easier to figure out where this css code is coming from.

    Best regards,
    Nikko

    March 29, 2019 at 5:12 pm #1084649
    peterolle

    Thanks for pointing that, I managed to see where it’s coming from. To style the youtube video under each post that was needed, so I will tweak the CSS to just use it for that.

    Solved.

    March 29, 2019 at 5:55 pm #1084684
    Nikko

    Hi peterolle,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘iframe blocking all site content’ is closed to new replies.