Responsive IFrame Generator

Inster the URL that you want your responsive IFrame to display. This tool will generate the needed HTML and CSS to add a responsive IFrame to your website. Simply copy/paste!
Insert iframe URL
Proportions
HTML
CSS

.iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: %;
}
.iframe-container iframe {
    position: absolute;
    top: 0;
    border: 0;
    height: 100%;
    width: 100%;
}

How To Use This Tool

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.
See All Isotropic Tools
A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram