How to make iframe responsive

Custom Coding
#1

The code below will make iframe embeds responsive. Instead of openstreetmap use your own embed url.

Here is a working example: https://responsive-iframe.softr.app/

<div class="iframe-container">  
<iframe class="responsive-iframe" src="https://www.openstreetmap.org/export/embed.html?bbox=12.639770507812502%2C52.24546054143251%2C13.793334960937502%2C52.786984035719925&amp;layer=mapnik" frameBorder="0" title="Berlin">
</iframe>
</div>

<style>
    .iframe-container {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    }

    /* Then style the iframe to fit in the container div with full height and width */
    .responsive-iframe {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
</style>
5 Likes
#2

Very useful thanx

1 Like