How to Fix Iframes in Responsive Web Design

21. April 2015 News 0
How to Fix Iframes in Responsive Web Design

More and more I find new code, plugins, etc. to make the responsiveness of my websites more effective. Its one thing to have a ‘responsive’ website in which most of the pages re-size seamlessly. It is quite another thing to have all the elements of your website completely responsive. Not long ago I found some code which allows me to make embedded iframes re-size. Before finding this I had some elements which still had issues re-sizing, embedded YouTube videos, embedded Google calenders, these things add functionality and entertainment value to my website and despite having the issue of responsiveness I wasn’t willing to give up on them.

By placing a class of video-container around my calenders, and embedded videos I now enjoy full responsiveness out of my iframes, below is the CSS I used to add this to my websites.

.video-container { position: relative; padding-bottom: 50%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }