How to make iframe responsive

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>

7 Likes

Very useful thanx

1 Like

@artur do you know if it’s possible to use this code for dynamic data in Softr? I’ve gotten iframes to load directly into Static Code Blocks and even as a click on modal pop-up, but the iframes won’t load in dynamic content. I have the iframe code currently set in a Rich Text field set as a code block within the field on Airtable and I’d like my Softr portal to display each separate iframe based on the iframe code in Airtable. Any ideas? Thank you!

If i’m not mistaken since you are calling the “softr” embed container class this will affect all the embeds in your project. Is there a way to select individual fields? I see that you have a CSS ID selector for the overall section container by naming the softr block. Is there something similar for the inidividual fields?

I’m playing whack a mole, if I use the overall classes to play with styling it will affect all similar field elements across the entire project. There should be a way to establish CSS class or selectors for different elements in the project so you have a bit more control.

I’m using the embed object quite a bit since there is no way to create buttons that link to fields from your airtable base so I would need to style these individually.