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>
7 Likes
2

Very useful thanx

1 Like
3

@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!

4

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.