Responsive featherlight iframes width

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!