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:
Max Width: 1000px
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.