Keep aspect ratio of iframe

[xairoo]

I'm sure most of the users want to get a large view to vimeo/youtube content.

So it should be possible to scale the height/weight based on the aspect ratio of the iframe.

Something like this:

onResize: function(_super, event){
    if (this.$content.naturalWidth) {
...
    } else {
        // get aspect ratio for iframes
        var w = this.$content.find('iframe').width(); var h = this.$content.find('iframe').height();
        /* Calculate the worst ratio so that dimensions fit */
        var ratio = Math.max(
            w  / parseInt(this.$content.parent().css('width'),10),
            h / parseInt(this.$content.parent().css('height'),10));
        if (ratio > 1) {
            this.$content.css('width', '' + w / ratio + 'px').css('height', '' + h / ratio + 'px');
        }
    }
    return _super(event);
},

.featherlight-iframe .featherlight-content {
    /* removed the border for image croping since iframe is edge to edge */
    border-bottom: 0;
    padding: 0;
    width: 100%;
    margin: 0;
    background: none;
}
.featherlight-iframe .featherlight-inner {
    margin: 0 auto;
}

[robneu]

+1 I do think this is a bit of an issue. Aside from using another library such as fluidvids, I can't seem to find a way to display videos correctly without some kind of a workaround like this.

I don't think anyone expects a video or an iframe to load as such a tiny thumbnail when it's been lightboxed, so this could probably be considered a bug?

[dejardine]

+1

[marcandre]

Looks like a nice feature to have. Can anyone come up with a good proposal, or even a PR for this?

[flywebguy]

"I don't think anyone expects a video or an iframe to load as such a tiny thumbnail when it's been lightboxed, so this could probably be considered a bug?"

+1 I consider this a bug as well. Any update from the author on this?

[marcandre]

@flywebguy The original author isn't around much, I do most of the maintenance...

[flywebguy]

@marcandre thanks for keeping this alive... it's by far the best lightbox out there.

I really wish I could help on this but jQuery is not my strong suit, but any ideas on fixing the iframe lightbox?

[evanrose]

Anyone ever come up with a fix?

[polarbirke]

You should be able to get the iframe responsive by applying a bit of CSS. Ben Marshall has a nice write-up here: https://benmarshall.me/responsive-iframes/

[mattkeys]

I've had decent luck with some CSS. I gave the iframe the following pixel-values for desktop sizes in the A tag:

data-featherlight-iframe-width="1000" data-featherlight-iframe-height="562"

These match my 16:9 ratio.

Then in my stylesheet I override these values with a media query, giving it a width of 90vw, and a height: calc( 90vw * 0.5625 );

Note that the height is calculated as a percentage of the width, the .5625 value corresponds to my 16x9 aspect ratio.

So long as the videos you want to embed follow this aspect ratio, you should be good. More work would need to be done to also cover different aspect ratios if that is a part of your use case.