Streaming live at 10am (PST)

Responsive iFrame Embed


#1

Hello! First time posting.

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 few other resources, 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.

Thank you in advance for any tips on this topic!


Preview URL: https://preview.webflow.com/preview/willrodenboughdesign?preview=296f188c504d970dd5da4cd2cdac2dd5
Published URL: willrodenboughdesign.webflow.io
iFrame Embed Location: home/projects/gummi-design-system
iFrame Embed Code: < iframe width=“1002” height=“800” src=“https://xd.adobe.com/embed/aafaf0b1-0525-411c-84f0-c38eb020d9aa” frameborder=“0” allowfullscreen >< /iframe >

Right below the Frame embed is an image that is behaving the way I would like for my iFrame embed to behave, as en example / reference.


#2

Hey! So I’m not able to look at the site due to it being password protected. In addition, I’m getting the Webflow 404 when I click your Share link.


#3

@Spencer_Irwin Whoops! Sorry. I removed the password and updated share link in OP and here.

https://preview.webflow.com/preview/willrodenboughdesign?preview=296f188c504d970dd5da4cd2cdac2dd5


#4

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


#5

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.

<iframe class="gummi" width="100%" height="800" src="https://xd.adobe.com/embed/aafaf0b1-0525-411c-84f0-c38eb020d9aa" frameborder="0" allowfullscreen></iframe>

I think this is your best bet, but someone more advanced in coding knowledge could have a better solution.

Let me know if you have any questions!


#6

@Spencer_Irwin,

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.


#7

For sure. So lets just forget about custom media queries.

  1. See where I added a class name to the iFrame above. You can name it whatever you want.

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

  3. 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.

Let me know if you still need more help.


#8

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

Thanks.


#9

That should be working even in the designer when you’re doing that. I will see what you’ve got so far.


#10

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.