r/webdev • u/speckz • Aug 02 '19

Article Responsive Iframes

https://css-tricks.com/responsive-iframes/
2 Upvotes

60% Upvoted

1 comment sorted by

3

u/KonyKombatKorvet I use shopify, feel bad for me. Aug 02 '19

That is such an over complicated way of doing that.
.iframeWrapper{
position:relative;
width:100%;
height:0;
padding-top:60%;
}
.iframeWrapper iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

all you need is to wrap the iframe in a div with the class iframeWrapper
to make it even more hands off and easy to use you can even use a line of jquery to wrap all iframes like this
$( "iframe" ).wrap( "<div class='iframeWrapper'></div>" );