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.

5

I have a ton of different embed codes in my artiable base, as they come from different places (Youtube, Slides, Canva, etc.).

I am trying to use a formula to take the source from the original iframe code, and then place it into your code. This will save me hours of boring copying and pasting.

Any ideas?

6

OK I actually managed to do this by myself. For reference in case anyone has the same issue:

Formula to extract the src url from an iframe (this is extracted from a field called {embed resource])

IF(
    {embed resource},
    REGEX_EXTRACT({embed resource}, 'src="([^"]+)"'),
    ""
)

I named the field above {source url from embed}

Then to bring this into a nice responsive iframe that will be common for all embeds, use this formula in another field:

IF(
    {Source url from embed},
    "<div style='position: relative; width: 100%; height: 0; padding-top: 56.2500%; padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden; border-radius: 8px; will-change: transform;'>" &
    "<iframe loading='lazy' style='position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0; margin: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16);' src='" &
    {Source url from embed} &
    "' allowfullscreen='allowfullscreen' allow='fullscreen'></iframe></div>",
    ""
)

I called this field {responsive iframe} and mapped it to softr. It works for all of the different types of embeds. I tested it on a regulr website and that worked too (not that I'll use it).
1 Like