Is there a way to make iframe embeds more responsive?

Question

so I'm somewhat new to front-end development and took it upon myself to learn it through trial and error but it seems as if I've hit a dead-end recently. I'm trying to position two google embeds (Google maps & forms) side-by-side but that only lead to having awkward aspect ratios between the two. My question is how can I align two iframes (Google maps & forms) embed inside of a container to have them display side-by-side when they're on a desktop and vertically on mobile while maintaining a comfortable aspect ratio(responsive width and height) to the user?

Here's what I have so far:

This is the look I'm going for: Contact Page with Contact Form and Google Maps embed side-by-side on desktop and vertically aligned on mobile

Answer 1

You would need to use "css media queries" in order to reposition items in an html page based on screen size.

I have made an example here, please feel free to copy paste this code onto your project :).

I can see you are a new developer here, and I would like you to note for next time that it would make people's jobs easier if you could copy your code and paste it into stackoverflow instead of taking a screenshot.

(The snippet below works better when you press on expand snippet and resizes to fit browser size)

<style>
    .container{
        display: flex;   /*Set div as flexbox to override default margins*/
    }
    iframe{/*Perform to all iframes*/
        width: 50%;
        margin: 10px;
    }
    @media only screen and (max-width: 900px) {/*When screen size is below 900px*/
        .container{/*Make the form and map stack over each other*/
            flex-direction: column;
            /*flex-direction: column-reverse;*//* If you want them to stack the other way around*/ 
        }
        iframe{
            width: 100%;/*Make iframes take up entire screen since they are no longer next to each other*/
        }
    }
</style>
<div class="container">
    <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSciufqdxJmnuDrbnCQywya61Tbf5sdf0RXKvbu4rNi7_Dba7gyjQ/viewform?embedded=true" id = "form" width="640" height="1427" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
    <iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=2880%20Broadway,%20New%20York&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>

Answer 2

To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:

<div>
<iframe src="blablabla.com" height="315" width="560" allowfullscreen="" frameborder="0">
</iframe>

THE CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;

}

Explanation of this CSS

1. Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.

2. Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly.

3. The padding-top value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos.

4. The height is set to 0 because padding-bottom gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div.

5. Setting overflow to hidden ensures that any content protruding outside of this element will be hidden from view.

After all this, you can just deal with your iframe

.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;

}