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:

<div class="iframe-container">  
<iframe class="responsive-iframe" src=";layer=mapnik" frameBorder="0" title="Berlin">

    .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%;


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.

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?

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])

    {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:

    {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