iframe is created without a width and height #250

Open
danwashusen opened this Issue Apr 6, 2012 · 3 comments

Comments

Projects
None yet
3 participants

We're using the new iframe support in 1.2.7 to show a custom video player. It mostly works but we've noticed that when the iframe is created it doesn't have a height and width set. As a result when we initialize the video player and use the iframe height and width to fit the video to the container we end up with a video that's much smaller than it should be. This seems to be because the iframes width & height are adjusted by Galleria after the iframes content has loaded...

We've worked around the issue by setting tweaking the Galleria code as follows:

this.image = $('<iframe>', {
    src: src,
    frameborder: 0,
    id: id,
    allowfullscreen: true,
    css: { visibility: 'hidden', width: $(".galleria-images").width(), height: $(".galleria-images").height() }
})[0];
Contributor

davidhellsing commented Apr 8, 2012

Can you post a live link or a test case where the bug occurs?

Unfortunately no, as I mentioned, we've worked around the issue with the tweaked code above.

If you take a look at the load function at line 5266 (https://github.com/aino/galleria/blob/master/src/galleria.js#L5266) the iframe is appended to the document without any dimensions set. Then at line 5268 the size callback is bound to the load event. So, until the load event is fired the iframe is tiny and calling $(window).height() within the iframe to initialize the video is useless as the correct height and width and not set until after the video has been initialized.

mshick commented Aug 2, 2012

I was having exactly the same issue, and Dan's solution fixed it for me.

I think this is an easy one to replicate. If you were to set this as the source for one of your Galleria iframe slides:

http://www.fastcompany.com/embed/05dd562b5fd25

You'd see that with the iframe not having a size on load, the player defaults to a really tiny size.

Though, I tested with a youtube iframe src, and did not have the same problem. So, it appears it has something to do with the approach the iframe logic itself handles sizing. I made the embed script for fastcompany.com, and will admit to not being quite as skilled as the youtube folks, but perhaps defining the size earlier is an all-around better idea?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment