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!

Answer 1

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

Answer 2

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

Answer 3

use this css

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