How-to Make an iframe Responsive Using HTML Code
Sometimes you need to embed another website into the site you are using and a typical way of doing this is by using an <iframe>. However for modern websites, typically an iframe is not responsive. By using the code below, you can still embed an iframe into your site and make it responsive.
<style type="text/css">
/*
<![CDATA[*/
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*]]>*/
</style>
<div class="embed-container">
<iframe src="https://INSERT-YOUR-URL-HERE" style="border:0"></iframe>
</div>
Here is the same code, minified:
<style type="text/css">.embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%}.embed-container embed,.embed-container iframe,.embed-container object{position:absolute;top:0;left:0;width:100%;height:100%}</style><div class="embed-container"><iframe src="https://INSERT-YOUR-URL-HERE" style="border:0"></iframe></div>
2 Comments
OMg. It works. My site now looks better
Glad it helped!