I’m trying to make my iframe embed responsive. I would like for my iFrame to decrease in size, maintaining it’s proportion / dimension ratio, as the browser width decreases, to avoid iframe content overflowing out of it’s embed element and off-screen at smaller browser widths.
I am able to achieve this behavior with image divs, using the following layout distinctions: Width: 100% Max Width: 1000px Height: Auto
I’m trying to achieve this behavior for my iFrame embed, and have not been able to do so successfully. I’ve applied these layout distinctions to the embed div, but the dimensions specified in the iFrame code mess this up, resulting in the iframe content overflowing out of the embed div, and off screen at narrow browser widths.
I searched the forum for help, but only found solutions for video embeds. I’m using the standard embed element for my non-video iFrame. I reviewed a fewotherresources, and it seems like I should be able to achieve this by removing the dimensions from the iFrame code itself, and replacing them with code that tells it to be 100% width / auto height, but I’m struggling to understand exactly how such code should be formatted in my iFrame code, and how to apply it correctly to my iFrame embed.
@WillR I’m pretty sure that you cannot do any styling with iFrames (or if you do it will be difficult/hacky), and the responsive code should be coming from whichever site the iframe source is hosted on.
Hey! So If you just apply 100% to the width in the custom code embed then it will be responsive, but then you will notice the height doesn’t adjust automatically and it’s a bit odd. You can use custom media queries to manipulate the height and width or more simply, add a class name to the iframe and then bring in a “dummy div” and customize it’s height and width at all the break points until it adapts the way you want.
I’m not familiar with custom media queries, nor was I able to understand what you meant with the class names and dummy div bit. If you’re willing to elaborate, I’d be willing to give it a shot.
For sure. So lets just forget about custom media queries.
See where I added a class name to the iFrame above. You can name it whatever you want.
Then add a div anywhere on your page that you will give the exact same class name as the iframe. This is just a temporary div that you will delete once you get the iframe to respond the way you want at each break point.
Style this temporary div or “dummy div” as I’ve been calling it, at the different screen widths (laptop, tablet, landscape mobile, and mobile). As you do this, you will notice that your iframe is also changing as a result of it being a part of the same class.
Just mess around with primarily the height at the different break points until you are happy with how it looks at each one.
@Spencer_Irwin Hmm, I wasn’t able to make this work with this method. Making style changes to the dummy div had no effect on the iFrame with the same class name, unless the HTML embed element containing the iframe code has the same class name, at which point I’m just styling the HTML embed element which is where I started originally. Am I misunderstanding something?
Looks like you went a different route and got rid of the iframe. Just a heads up on your images. They are all super huge in file size and will slow your site down drastically if you don’t optimize them for the web. Webflow suggests that image file sizes be less than 200kB.
Feel free to personally message me if you would like to know anymore about image optimization as well as how to style your iframe using a dummy div.
have same issue here, I don’t understand how to make a embed html fully responsive and without scrollbars on the side. Im trying to embed this page into webflow https://rentle.store/roirent/shop?
I found the solution to ensure the iframe width & height is responsive and there is no double scrollbar.
Give the HTML embed a class name
Give the class size > 100% (width) 100VH (height)
Include this code below into a HTML Embed element
Here’s the code that I used in my HTML embed
<style type="text/css">
body {margin:0; overflow: hidden;}
iframe {border: none;}
</style>
<iframe src="**insert your link here**"
name="**insert a page name here**" height="100%" width="100%" title="**insert a page title here**" id="iFrame1"></iframe>
I have been sitting with the same problem for hours. Found this topic and used your solution and worked like a charm. Made an account just to say thank you. So… THANK YOU!!
Hey Spencer, I have tried this technique to try and have a Figma prototype work as a responsive imbed on my website. All the suggestions do not actually adjust my iframe it only crops the content. Any tips on how to get this to work properly.
