Paste in the URL to the website that you'd like to show within your responsive iframe. If looking to embed a YouTube video, there's an additional option to include player attributes. Choose your proportion - this will remain fixed as the size of the iframe scales up and down, responsively, with screen size.
The HTML and CSS will auto populate, alongside a preview of the iframe. To install on your website copy and paste the HTML and CSS to your webpage.
Why Generate A Responsive iframe?
This is also a great way to easily generate a responsive YouTube video, which is why that's what the placeholder is.
Any website should be responsive. IFrames are a great way to embed content within a webpage, but are not automatically responsive, no will they keep a fixed aspect ratio.
This tool will create the code needed to resolve those issues, and have a 100% responsive website - IFrames included.
Credit Where Credit Is Due
This is an adapted fork of this Codepen Project. Included in the source JS is the code which the author requested remain. Thanks for allowing people to use it for free :)!
A Part Of IsoTools
A collection of ad-free, well designed, helpful tools for web designers and developers.