Responsive featherlight iframes width

Question

I'm using the featherlight lightbox to open iframes with different widths, please see the 1st 2 links on the fiddle below:

http://jsfiddle.net/sm123456/d5Lvw1rs/

The issue is that I seem I cant seem to be able to make the iframe responsive ie. when the browser window goes below the iframe width, the iframe should switch to 100%.

I've tried the code below which should work great, but doesn't, even when removing data-featherlight-iframe-height="575" data-featherlight-iframe-width="800".

data-featherlight-iframe-style="width: 100% !important; max-width: 800px !important;"

Any assistance would be very much appreciated!

Did you fix your problem? Because for me, your JSFiddle is doing exactly what you want. As soon as the window is smaller than 920px, it's going to 100% the window width. — Alex Berger, Oct 27 '22 at 07:05
No havent fixed it yet! But there are 2 different sized (width) iframes.. 1 is 800px and 1 is 1350px. — JimWids, Oct 28 '22 at 11:12

FUZIION · Accepted Answer · 2022-11-02T16:03:03.863

4

After reading the documentation, I found out you can add a custom class to the lightbox using the data-featherlight-variant="classname" attribute. Using this attribute, I added a different class to both the 800px and the 1350px one. Using that class, I applied the style. Check the JSFiddle to see it in action.

For the 800px width one:

data-featherlight-variant="custom-class-800"

@media only screen and (max-width: 800px) {
  .custom-class-800,
  .custom-class-800 .featherlight-content{
    width: 100%;
  }
  .custom-class-800 .featherlight-content .featherlight-inner {
    margin: 0 auto;
  }
}

For the 1350px width one:

data-featherlight-variant="custom-class-1350"

@media only screen and (max-width: 1350px) {
  .custom-class-1350,
  .custom-class-1350 .featherlight-content {
    width: 100%;
    margin: 0;
  }
}

JS Fiddle

edited Nov 02 '22 at 16:03

answered Oct 28 '22 at 08:35

FUZIION

1,606
1
6
19

Thanks! ..but how about the iframe in the fiddle which is 1350 px width? This solution only caters for the 800px iframe – JimWids Oct 28 '22 at 11:10
I will create another media query for the other iframe. – FUZIION Oct 28 '22 at 11:33
Added CSS for the other one – FUZIION Oct 28 '22 at 11:51
Hi Yes sorry but isnt working not even in the fiddle (the iframe at width 1350 is not effected) im using the latest ff version 106.0.3 – JimWids Nov 02 '22 at 03:39
Hi @JimWids I have found an easier solution, see the JSFiddle for a working example. – FUZIION Nov 02 '22 at 11:04
@JimWids did you notice the new solution? – FUZIION Nov 03 '22 at 08:30
1

thanks brother yes thats the perfect solution, I searched for a way to add a class but couldnt find it... thanks so much!!!!!!!!!!!!!!!!!!!!!!!! – JimWids Nov 09 '22 at 02:49
it seems im not able to give u the 50+ points? but many thanks! – JimWids Nov 09 '22 at 03:07
Yes the bounty unfortunately expired and only payed out half, but no problem glad I could help – FUZIION Nov 09 '22 at 08:54

DSDmark · Answer 2 · 2022-10-28T08:32:02.733

Hey @JimWids

Try to use that CSS:-

.featherlight-iframe .featherlight-content{
        /* dimensions: 1140px prevents iframe from spanning the full width of the browser */
        width: 80%;
        max-width: 1140px;

        /* spacing */
        margin: 0;
        padding: 0;
    }

    .featherlight-iframe .featherlight-inner{
        /* positioning */
        display: block;
        float: left;
        position: relative;

        /* dimensions */
    
        width: 100%;
    }
    .featherlight .featherlight-inner:after{
        /* dimensions */
        content: "";
        float: left;
        width: 80%;
    height:80%;
        padding-top: 57%;
        display: block;
        position: relative;
    }
}

Here is that code:- JS_Fiddle

Thanks but the smaller iframe (900px) will now stretch larger than 900px, surely the same with the larger one too but im on a small screen so its not evident to me — JimWids, Nov 02 '22 at 03:43

score 0 · Answer 3 · answered Oct 28 '22 at 13:09

0

use this css

@media (max-width: 1024px){
  .featherlight .featherlight-content {
      width: 100%;
  }
  .featherlight .featherlight-image {
      width: 100% !important;
      object-fit: cover;
  }
}

answered Oct 28 '22 at 13:09

Junaid Shaikh

1,045
4
19

Responsive featherlight iframes width

3 Answers3

Here is that code:- JS_Fiddle