Monday, November 16, 2015

Making an iframe responsive

http://stackoverflow.com/questions/17838607/making-an-iframe-responsive

I found a solution from from Dave Rupert / Chris Coyier. However, I wanted to make the scroll available so I came up with this:
// HTML
<div class='myIframe' > 
<iframe> </iframe> 
</div>
// CSS
.myIframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto; 
-webkit-overflow-scrolling:touch; //<<--- THIS IS THE KEY 
border: solid black 1px;
} 
.myIframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}