Online Responsive iFrame Code Generator
Embed external web pages, videos, forms, maps, and content into your website instantly using clean, responsive iFrame code. Customize width, height, responsive behavior, allow attributes, sandbox options, and more.
Contents
What is an iFrame?
An iframe (Inline Frame) is an HTML tag used to load another webpage or resource inside the current page. It displays external content as if it is part of your website, without copying or hosting the content yourself.
Basic iFrame Syntax Example:
Common Uses of iFrames
- Embedding YouTube or Vimeo videos
- Displaying Google Maps on a page
- Showing external webpages without redirecting users
- Running widgets, tools, and calculators
- Embedding charts, reports, or dashboards
- Loading ads or promotional content from external servers
This tool makes it easy to generate clean, responsive iframe code in seconds:
- Enter the source URL
- Customize options like allowfullscreen, autoplay, or borders.
- Choose width and height
- Copy and paste the ready HTML into your site
A responsive iframe automatically adjusts to the user screen. This tool automatically generates responsive iframe embed code that works smoothly on all devices, without CSS overflow problems.
Can disable scripts, pop-ups, forms, navigation, and limit external actions.
Common permissions include camera, microphone, fullscreen, autoplay, geolocation, clipboard, and more.
Some websites cannot be embedded because their servers send security headers such as X-Frame-Options or Content-Security-Policy. These settings intentionally block iFrames for protection, so you may not always be able to display every site inside an iframe.
Preview Iframe:
HTML iFrame code:
<iframe
src="https://example.com"
title="my frame example"
style="width:400px;height:400px;border:1px solid #A6A6A6;">
</iframe>
Embed any YouTube video perfectly responsive on all devices. The standard 16:9 ratio works for almost all modern videos and automatically scales from mobile to 4K screens.
Create a fully responsive YouTube iframe in one click. Just paste your video ID and the code is generated automatically.
youtube.com/embed/ uses the standard YouTube player with full tracking and cookies, while youtube-nocookie.com/embed/ provides a privacy-enhanced version that minimizes tracking and reduces cookie usage.<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/1dVZYmrbpHc"
title="YouTube Video Example"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen >
</iframe>
</div>.iframe-container {
position: relative;
width: 100%;
overflow: hidden;
background: #ddd;
border: solid 1px #acacac;
padding-top: 56.25%; /* 16:9 aspect ratio */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}1. YouTube Privacy-Enhanced Mode
URL: https://www.youtube-nocookie.com/embed/VIDEO_ID
This mode improves privacy by not storing cookies until the user plays the video. Recommended for GDPR-friendly websites and users who want minimal tracking.
2. Standard YouTube Embed
URL: https://www.youtube.com/embed/VIDEO_ID
he regular YouTube embed. Loads faster and supports all normal features but may set tracking cookies immediately when the iframe loads.
Display interactive Google Maps that adjust to any screen size.
<div class="iframe-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387191.0369076759!2d-74.25908983412004!3d40.69740344226211!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sus!4v1698000000000"
title="Google Maps - New York"
loading="lazy"
sandbox="allow-scripts allow-same-origin allow-popups">
</iframe>
</div>
.iframe-container {
position: relative;
width: 100%;
overflow: hidden;
background: #ddd;
border: solid 1px #acacac;
padding-top: 56.25%; /* 16:9 aspect ratio */
/* padding-top: 100%; /* ratio-1-1 - Square (Instagram, etc.) */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}Show a single Instagram post or reel in perfect square format.
<div class="iframe-container">
<iframe src="https://www.instagram.com/p/DEhOo1JsD7e/embed"
title="Instagram Post Example"
scrolling="no"
allowtransparency="true"
loading="lazy">
</iframe>
</div>
.iframe-container {
position: relative;
width: 100%;
overflow: hidden;
background: #ddd;
border: solid 1px #acacac;
padding-top: 100%; /* 1:1 aspect ratio */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}This layout keeps your iframe fully fluid on all screen sizes. It maintains the correct aspect ratio and prevents overflow issues, making it perfect for videos, maps, forms
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/1dVZYmrbpHc"
title="YouTube Video Example"
loading="lazy"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen >
</iframe>
</div>.iframe-container {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
background: #ddd;
border: solid 1px #acacac;
border-radius: 5px;
padding-top: 56.25%; /* Default 16:9 aspect ratio */
/* padding-top: 75%; /* ratio-4-3 - Classic videos, old TVs */
/* padding-top: 100%; /* ratio-1-1 - Square (Instagram, etc.) */
/* padding-top: 42.86%; /* ratio-21-9 - Ultra-wide / Cinema */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}Example of a Responsive iFrame Embed Inline Style
This layout uses a ratio container to keep the iframe automatically scaled on any screen.
<div style="position:relative;padding-top:56.25%;">
<iframe src="https://example.com"
style="position:absolute;top:0;left:0;width:100%;height:100%;"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Why is my iframe showing a blank page?
Many websites block iframe embedding for security reasons. They use headers such asX-Frame-Options or Content-Security-Policy. If these headers forbid loading on external sites, the page cannot be displayed inside an iframe.
Why does the iframe show 'Refused to Connect'?
This usually means the website has disabled embedding on other domains. Some services (like banking portals, email services, or certain social networks) do not allow themselves to be displayed in third-party iframes.
How can I make an iframe responsive?
Wrap the iframe in a container with a percentage based padding (such as 16:9=56.25%) and absolutely position the iframe inside it. This allows the iframe to scale automatically with screen size.
What does loading="lazy" do?
It delays the loading of the iframe until it becomes visible on screen. This improves page performance, saves bandwidth, and speeds up initial loading time.
What is the sandbox attribute?
The sandbox attribute restricts what the embedded content is allowed to do. You can selectively enable permissions such as scripts, forms, pop-ups, or same-origin access to improve security and control.
What is the difference between sandbox and allow?
sandbox limits capabilities inside the iframe.allow adds specific permissions back, such as fullscreen, microphone access, or clipboard usage. Many advanced embed features require certain permissions to be 'allowed'
What does the Referrer Policy do?
The referrerpolicy attribute controls what information is sent to the iframe about where the user came from. For example, no-referrer sends no information, while origin sends only the site’s domain.
Why can't I style the content inside the iframe?
Iframe content is isolated in its own document for security reasons. You can style the iframe element itself, but you cannot modify or access the content inside unless both pages share the same domain and allow it.
Can iframes improve SEO?
No. Content inside an iframe belongs to the original site, not your page. Search engines do not treat embedded iframe content as part of your website, so it does not improve your page SEO.
Why does Instagram or some services require extra scripts?
Some platforms (like Instagram or TikTok) require their official JavaScript to load styling and formatting. Without these scripts, the iframe may appear blank or not render properly.
How can I remove scrollbars inside the iframe?
If the embedded page fits within the iframe, scrollbars can be removed by setting:scrolling="no".However, if the content overflows, scrollbars will appear automatically unless the embedded website is designed for responsive layouts.
Can I disable interaction inside the iframe?
Yes. You can use CSS such as pointer-events: none; to make the iframe non-clickable. This is useful for decorative previews or static displays.