iFrame HTML with Responsive Iframe Generator | Embed Code Generator tool

Use this Iframe Generator Responsive tool for Websites, Blogs, Games, Docs, Youtube videos | Embed Code Generator

Privacy Policy Contact Us About Us

Send 🧐 Secret Messages


🤩 Best Deals For The Day 🤑

iFrame Generator
Examples: Website Youtube Reset








iFrame Generated Code






Above tool is an iframe generator, which will help you in generating iframe code.




Let us see each and every property/attribute of iframe with an example.


iFrame - <iframe>

An iframe is an HTML element/object that allows an external website or webpage to be embedded in an HTML document.

In other words, it’s a website within a website. It’s like embedding a chrome or firefox tab within a page, except that it doesn’t have any toolbars or an address bar or anything visible other than the web page that’s loaded. This allows developers to load one web page within another without the user necessarily knowing that they are separate pages. An iFrame may load something as simple as a single like button to an entire web page or documents like pdf and many more.

We can create multiple iframes on the same page.


Syntax:
<iframe src="URL" title="Title of the iframe">
<p>Your browser does not support iframes.</p>
</iframe>


<iframe> tag can appear anywhere in your HTML document. It defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. This tag is used to embed another document within the current HTML document through src property.


iframe Example:
<iframe name="my_frame" src="https://www.iframeinhtml.com/p/hello-world.html" width="600px" height="400px">
<p>Your browser does not support iframes.</p>
</iframe>

Most of the basic attributes of the iframe tag are id, name, title, class, style, width, height, frameborder, longdesc, marginheight, marginwidth, scrolling, etc... Let's see common attributes with examples.



iframe src

This HTML iframe src attribute contains URL of the website or webpage, that needs to displayed on the current page.

URL can be either Absolute path (points to another web site like src="https://www.iframeinhtml.com/p/hello-world.html") or Relative path (points to a file within a web site like src="default.html").

1. Example - Absolute path
<!DOCTYPE html>
<html>
<title>iframe src attribute</title>
<body>
<h2>Content goes here</h2>
<iframe src="https://output2050.blogspot.com/p/blog-page_26.html"></iframe>
</body>
</html>



iframe name

This HTML iframe name attribute specifies a name for the tag.

Using this name attribute, we can use iframe as a target for the hyperlinks using <a> tag. This implies that when a link(<a>) with a target attribute with that name as value is clicked, the linked resource will open in that iframe.

Let's understand it with an example

2. Example - name attribute
<!DOCTYPE html>
<html>
<title>iframe name attribute</title>
<body>
<h2>Content goes here</h2>
<a href="https://output2050.blogspot.com/p/one.html" target="load_frame">One</a>

<a href="https://output2050.blogspot.com/p/blog-page.html" target="load_frame">Two</a>

<a href="https://output2050.blogspot.com/p/three.html" target="load_frame">Three</a>

<a href="https://output2050.blogspot.com/p/four.html" target="load_frame">Four</a>

<a href="https://output2050.blogspot.com/p/five.html" target="load_frame">Five</a>

<iframe
name="load_frame"
src="https://output2050.blogspot.com/p/blog-page_26.html"
width="500px"
height="200px"
></iframe>

</body>
</html>

In above example, whenever we click on any one of the link, than that link's webpage will be opened in the iframe. This is done through <a> target attribute and <iframe> name attribute.



iframe width and height

width: Specifies the width of an iframe in pixels or percentage. Default width is 300 pixels

height: Specifies the height of an iframe in pixels or percentage. Default height is 150 pixels

Let's see an examples with above attributes

3. Example - weight and height in px
<!DOCTYPE html>
<html>
<title>iframe width & height attributes</title>
<body>
<h2>Content goes here</h2>
<iframe
name="my_frame"
src="https://output2050.blogspot.com/p/blog-page_26.html"
width="350px"
height="400px"
>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>


4. Example - weight and height in %
<!DOCTYPE html>
<html>
<title>iframe width and height attributes</title>
<body>
<h2>Content goes here</h2>
<iframe
name="my_iframe"
src="https://output2050.blogspot.com/p/blog-page_26.html"
width="95%"
height="75%"
></iframe>
</body>
</html>



iframe srcdoc

srcdoc attribute contains HTML content, which will override src attribute. If a browser does not support the srcdoc attribute, it will fall back to the URL in the src attribute.

Let's understand it with an example

5. Example - srcdoc
<!DOCTYPE html>
<html>
<title>iframe srcdoc attribute</title>
<body>
<h2>Content goes here</h2>
<iframe
name="my_iframe"
srcdoc="<h1 style='text-align:center; color:#9600fa'>Welcome to iframes</h1>"
src="https://output2050.blogspot.com/p/blog-page_26.html"
width="500px"
height="200px"
></iframe>
</body>
</html>



iframe allowfullscreen

This HTML iframe allowfullscreen attribute is used while displaying videos or google maps. Using this attribute we can either enable or disable fullscreen property on videos.

Let's understand it with an example

6. Example - without allowfullscreen
<!DOCTYPE html>
<html>
<title>iFrame srcdoc attribute</title>
<body>
<h2>Content goes here</h2>
<iframe
name="my_frame"
src="https://www.youtube.com/embed/2d2rfsm3ApU"
width="500px"
height="200px"
></iframe>
</body>
</html>


7. Example - with allowfullscreen
<!DOCTYPE html>
<html>
<title>iFrame srcdoc attribute</title>
<body>
<h2>Content goes here</h2>
<iframe
name="my_frame"
allowfullscreen
src="https://www.youtube.com/embed/2d2rfsm3ApU"
width="500px"
height="200px"
></iframe>
</body>
</html>



iframe sandbox

This HTML iframe sandbox attribute enables an extra set of restrictions for the content in the iframe. The value of the attribute can either be empty to apply all restrictions or space-separated tokens to lift particular restrictions. Let's understand one by one with examples.

1. allow-forms: Allows the resource to submit forms. If this keyword is not used, form submission is blocked.

2. allow-modals: Allows to open modal windows.

3. allow-orientation-lock: Allows to lock the screen orientation.

4. allow-pointer-lock : Allows to use the Pointer Lock API.

5. allow-popups: Allows popups (such as window.open(), target="_blank", or showModalDialog()). If this keyword is not used, the popup will silently fail to open.

6. allow-popups-to-escape-sandbox: Allows popups to open new windows without inheriting the sandboxing.

7. allow-presentation: Allows to start a presentation session.

8. allow-same-origin: If this token is not used, the resource is treated as being from a special origin that always fails the same-origin policy.

9. allow-scripts: Allows to run scripts.

10. allow-top-navigation: Allows the iframe content to navigate its top-level browsing context.

11. allow-top-navigation-by-user-activation: Allows the iframe content to navigate its top-level browsing context, but only if initiated by user.

8. Example - sandbox="allow-forms"
<!DOCTYPE html>
<html>
<title>iFrame srcdoc attribute</title>
<body>
<h2>Content goes here</h2>
<iframe
name="my_iframe"
sandbox="allow-forms"
src="https://output2050.blogspot.com/p/sandbox1.html"
width="500px"
height="200px"
></iframe>
</body>
</html>


9. Example - sandbox="allow-scripts"
<!DOCTYPE html>
<html>
<title>iFrame srcdoc attribute</title>
<body>
<h2>Content goes here</h2>
<iframe
name="my_frame"
sandbox="allow-forms"
src="https://output2050.blogspot.com/p/sandbox2.html"
width="500px"
height="200px"
></iframe>
</body>
</html>


10. Example - sandbox="allow-popups"
<!DOCTYPE html>
<html>
<title>iFrame srcdoc attribute</title>
<body>
<h2>Content goes here</h2>
<iframe
name="my_iframe"
sandbox="allow-popups"
src="https://output2050.blogspot.com/p/sandbox3.html"
width="500px"
height="200px"
></iframe>
</body>
</html>



iframe align

This HTML iframe align attribute is used for alignment of this element with respect to the surrounding context.

11. Example - align
<!DOCTYPE html>
<html>
<title>iframe align attribute</title>
<body>
<h2>Content goes here</h2>
<h3>Check by modifing alignments to left and center also.</h3>
<iframe
align="right"
src="https://agecalculatoronlinebydateofbirth.blogspot.com"
width="500px"
height="200px"
></iframe>
</body>
</html>



iframe scrolling

This HTML iframe frameborder attribute allows users to enable or disable scrolling option on iframe webpages. Its has been deprecated from new HTML5 specifications, but still supported on browsers. For values three options are available.

1.auto indicates scrollbars if required.

2.yes indicates active scrollbars.

3.no indicates no scrollbars.

12. Example - scrolling
<!DOCTYPE html>
<html>
<title>iframe scrolling attribute</title>
<body>
<h2>Content goes here</h2>
<h3>Check by modifing scrolling = no.</h3>
<iframe
scrolling="yes"
src="https://agecalculatoronlinebydateofbirth.blogspot.com"
width="500px"
height="200px"
></iframe>
</body>
</html>



iframe marginheight and marginwidth

These iframe attributes are used to control the height and width of margins around an iframe respectivelly in pixels. Its has been deprecated from new HTML5 specifications, but still supported on browsers. Use CSS instead. Let's see this by using css style example.

13. Example - margin and padding
<!DOCTYPE html>
<html>
<title>iframe margin and padding with css</title>
<body>
<h2>Content goes here</h2>
<iframe
style="margin: 50px; padding: 50px;"
src="https://agecalculatoronlinebydateofbirth.blogspot.com"
width="500px"
height="200px"
></iframe>
</body>
</html>



iframe frameborder

This HTML iframe frameborder attribute is used to specify whether or not to display the border around the content of an iframe. It takes two values 1 and 0. 1 indicates set border and 0 indicates remove border. Default value is 1. Its has been deprecated from new HTML5 specifications, but still supported on browsers.

Try yourself by replacing style with frameborder="1|0" in below example. Let's see an example with css.

14. Example - frameborder with css
<!DOCTYPE html>
<html>
<title>iframe frameborder with css</title>
<body>
<h2>Content goes here</h2>
<iframe
style="border: 10px solid #000000;"
src="https://agecalculatoronlinebydateofbirth.blogspot.com"
width="500px"
height="200px"
></iframe>
</body>
</html>





Frequently Asked Questions


iframe Google maps

Embedding Google Maps to your website is quite simple and is not at all complicated. The first thing that comes to someone’s mind about adding Google Maps to their website is the fear of coding.

All you need to do is open Google maps and in left side pannel -> search field provide the address of the location you wish to add to your website.

In the same pannel check for Share button and click on that button. A Share popup will be opened. In that select Embed a map tab. From options on popup, make necessary changes like size and finally click on COPY HTML button and then iframe code be available for you.

Next step is to past it in your website and you are ready to start enjoy the benefits of Google Maps.

Let's see an example wiht google map link

Note: Place your Google API Key

15. Example - iframe google maps
<!DOCTYPE html>
<html>
<title>iframe Google maps</title>
<body>
<h2>Content goes here</h2>
<iframe
src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Space+Needle,Seattle+WA"
width="600px"
height="450px"
style="border:0;"
allowfullscreen
></iframe>
</body>
</html>



iframe for video or iframe Youtube

Inserting video onto a web page was not relatively easy, because web browsers did not have a uniform standard for defining embedded media files like video.

There are 4 ways for embeding/inserting videos on webpages.

1. video tag

Example:
<video controls="controls" src="media/shuttle.mp4">
<p>Your browser does not support the HTML5 Video element.</p>
</video>

2. object tag

Example:
<object data="media/blur.swf" width="400px" height="200px"">
<p>Your browser does not support the HTML5 Video element.</p>
</object>

3. embed tag

Example:
<embed src="media/blur.swf" width="400px" height="200px">

4. iframe tag

Among above 3 types, this is the easiest and popular way to embed videos files in the web pages. Just upload the video on YouTube and insert HTML code to display that video in your web page.

Example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/url" allowfullscreen>
<p>Your browser does not support iframes.</p>
</iframe>

When you open your uploaded video in YouTube you will see something like the following figure at the bottom of the video. Browse and open your uploaded video in YouTube. Now look for the share button which is located just below the video as shown in the screen-shot.

When you click the share button, a share panel will open displaying some more buttons. Now click on the Embed button, it will generate the HTML code to directly embed the video into the web pages. Just copy and paste that code into your HTML document where you want to display the video and you're all set. By default video embedded inside an iframe.

You can further customize this embed code such as changing the video size by selecting the customization option given just below the embed-code input box.

Note: iframe "allowfullscreen" attribute is used to enable max-size button on videos.

a. iframe Youtube Autoplay:

Parameters 1 or 0. If autoplay="0" then video will not play on page load else if autoplay="1" then video will play automatically on page load.


Example:
<iframe src="https://www.youtube.com/embed/hQCO-O_c5tU?autoplay=1" allowfullscreen>
<p>Your browser does not support iframes.</p>
</iframe>

b. iframe Youtube Playlist:

Actually there are two ways to embed playlists from youtube. In the first method you can directly specify all the videos that you want to play in the embed player.


Syntax:
<iframe src="https://www.youtube.com/embed/VIDEO_ID?playlist=VIDEOID_1,VIDEOID_2" allowfullscreen>
</iframe>

Example:
<iframe src="https://www.youtube.com/embed/hQCO-O_c5tU?playlist=2d2rfsm3ApU,w7hWFk4yELs" width="560" height="315" allowfullscreen>
<p>Your browser does not support iframes.</p>
</iframe>

Each video ID must be separated by using comma.

Secondly, you can embed a playlist that is already present in youtube using the playlist ID

Syntax:
<iframe src="https://www.youtube.com/embed/?listType=playlist&list=PLAYLIST_ID" allowfullscreen>
<p>Your browser does not support iframes.</p>
</iframe>

Example:
<iframe src="https://www.youtube.com/embed/2d2rfsm3ApU?list=PL9zy7msrVDoO6GBO04t1FKYqWr1TzQZ9r" width="560" height="315" allowfullscreen>
<p>Your browser does not support iframes.</p>
</iframe>

c. iframe Youtube Loop:

Parameters 0 or 1. Default value is loop="0" and video will play only once. If loop="1" then video will play forever.


Example:
<iframe src="https://www.youtube.com/embed/hQCO-O_c5tU?loop=1" allowfullscreen>
<p>Your browser does not support iframes.</p>
</iframe>
16. Example - iframe for video
<!DOCTYPE html>
<html>
<title>iframe for video</title>
<body>
<h2>Content goes here</h2>
<iframe
width="560px"
height="315px"
allowfullscreen
src="https://www.youtube.com/embed/hQCO-O_c5tU?autoplay=1&loop=1"
></iframe>
</body>
</html>


Youtube refused to connect iframe

The YouTube URL in src must have and use the embed endpoint instead of watch, so for instance let’s say you want to embed this YouTube video: https://www.youtube.com/watch?v=P6N9782MzFQ (browser's URL).

You should use the embed endpoint, so the URL now should be something like https://www.youtube.com/embed/P6N9782MzFQ. Use this value as the URL in the src attribute inside the iframe tag in your HTML code, for example

Example:
Actual URL: https://www.youtube.com/watch?v=tgbNymZ7vqY
Modified URL: https://www.youtube.com/embed/tgbNymZ7vqY
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY" allowfullscreen>
<p>Your browser does not support iframes.</p>
</iframe>


iframe with css

We can apply css styles in two different ways.

a. Apply css styles to iframe block and

b. Apply css styles to webpage embedded in the iframe.

a. Styling iframe block

While most browsers include iframes without a lot of extra styles, it's still a good idea to add some styles to keep them consistent. Here are some CSS styles we always include on iframes

margin: 0; padding: 0; border: none; width: value; height: value; overflow: scroll;

17. Example - css
<!DOCTYPE html>
<html>
<title>iframe for video</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
iframe {
margin-top: 20px;
margin-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
width: 600p;
height: 400px;
border: 10px solid #37ff00;
}
</style>
</head>
<body>
<h2>Content goes here</h2>
<iframe
allowfullscreen
src="https://www.youtube.com/embed/2d2rfsm3ApU"
></iframe>
</body>
</html>



b. Styling webpage embedded in iframe

We can apply or override our own styles to iframe webpage.But there are some restrictions. Styles does not work cross domain unless the appropriate CORS header is set.

The style of the page embedded in the iframe must be either set by including it in the child page

18. Example
<!DOCTYPE html>
<html>
<title>iframe for video</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="Stylesheet" href="my-styles.css" />
</head>
<body>
<h2>Content goes here</h2>
<iframe
width="600px"
height="450px"
allowfullscreen
src="https://www.youtube.com/embed/w7hWFk4yELs"
></iframe>
</body>
</html>

Or it can be loaded from the parent page with Javascript:

19. Example
<!DOCTYPE html>
<html>
<title>iframe for video</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="Stylesheet" href="my-styles.css" />
<script>
var cssLink = document.createElement("link");
cssLink.href = "style.css";
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
frames['iframe1'].document.head.appendChild(cssLink);
</script>
</head>
<body>
<h2>Content goes here</h2>
<iframe
name="iframe1"
id="iframe1"
width="600px"
height="450px"
allowfullscreen
src="https://www.youtube.com/embed/2d2rfsm3ApU"
></iframe>
</body>
</html>



iframe responsive (Use above Responsive Iframe Code Generator Tool)

Responsive web design is about creating web pages that will be automatically adjust for different screen sizes and viewports.

In this section we will look at making iframes responsive using css by taking youtube video as an example.

Step 1: For any responsive webpage first and foremost is meta tag with content="width=device-width, initial-scale=1" is required. Define this tag in head section.

Step 2: Create a iframe inside a div tag

Step 3: Add css to div and iframe tags respectivelly as shown in below example.

20. Example - Responsive Video
<!DOCTYPE html>
<html>
<title>Responsive Video</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.iframe-container {
width: 100%;
position: relative;
overflow: hidden;
padding-top: 66.66%;
}
.iframe-responsive {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: none;
}
</style>
</head>
<body>
<div class="iframe-container">
<iframe
class="iframe-responsive"
src="https://www.youtube.com/embed/w7hWFk4yELs"
></iframe>
</div>
</body>
</html>


Aspect ratio: In above example, try replacing position-top css attribute by following.

padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

padding-top: 75%; /* 4:3 Aspect Ratio */

padding-top: 66.66%; /* 3:2 Aspect Ratio */

padding-top: 62.5%; /* 8:5 Aspect Ratio */

padding-top: 100%; /* 1:1 Aspect Ratio */


21. Example - Responsive Website
<!DOCTYPE html>
<html>
<title>Responsive Website</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.iframe-container {
margin: 0 auto;
max-width:100%;
width: 100%;
height: 100%;
}
@media only screen and (max-width: 992px) {
.iframe-container{
width: 80%;
height: 500px;
}
}
@media only screen and (max-width: 600px) {
.iframe-container{
width: 100%;
height: 500px;
}
}
</style>
</head>
<body>
<div class="iframe-container">
<iframe
src="https://agecalculatoronlinebydateofbirth.blogspot.com"
style="width:100%;height:100%;"
></iframe>
</div>
</body>
</html>


javascript iframe

In this section we will learn how to create iframes through javascript and it's as simple as creating other tags like div, image, table, etc... using javascript.

Step 1: Create one empty tag like div or span with id property.

Step 2: Create javascript function for creating iframe object. As per example create iframe object and add all required properties like src, width, height, etc... Finally append this object has a child to already created div tag.

Step 3: Call this function from body tag onload event.

22. Example - javascript iframe
<!DOCTYPE html>
<html>
<title>javascript iframe</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body">
<button onclick="createIframe()">Show Iframe</button>
<div id="iframeId">
</div>
</body>
<script type="text/javascript">
function createIframe() {
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://www.youtube.com/embed/2d2rfsm3ApU");
ifrm.style.width = "640px";
ifrm.style.height = "480px";
document.getElementById("iframeId").appendChild(ifrm);
}
</script>
</html>



Multiple iframes

As already said in the begnning of this artice, you can create any number of iframes in the same webpage. Lets see an example of creating four iframes using youtube videos.

23. Example - multiple iframes
<!DOCTYPE html>
<html>
<title>Multiple iframes</title>
<body>
<h2>Content goes here</h2>
<table>
<tr>
<td><iframe src="https://www.youtube.com/embed/hQCO-O_c5tU" width="200px" height="200px" allowfullscreen></iframe></td>
<td><iframe src="https://www.youtube.com/embed/2d2rfsm3ApU" width="200px" height="200px" allowfullscreen></iframe></td>
</tr>
<tr>
<td><iframe src="https://www.youtube.com/embed/w7hWFk4yELs" width="200px" height="200px" allowfullscreen></iframe></td>
<td><iframe src="https://www.youtube.com/embed/hQCO-O_c5tU" width="200px" height="200px" allowfullscreen></iframe></td>
</tr>
</table>
</body>
</html>



Load Pdf file with iframe

24. Example - Load PDF file
<!DOCTYPE html>
<html>
<title>Load Pdf file</title>
<body>
<h2>Content goes here</h2>
<iframe
name="iframe1"
id="iframe1"
width="640px"
height="480px"
allowfullscreen
src="https://drive.google.com/file/d/1qEANCzGGXQ0pcknEPmjx7idiUWyUPhRF/preview"
></iframe>
</body>
</html>



Emded funhtml5games on your blog or website

25. Example - Load funhtml5games
<!DOCTYPE html>
<html>
<title>Load fun html5 games</title>
<body>
<h2>Content goes here</h2>
<iframe
name="iframe1"
style="width:640px;height:350px;border:none;"
frameborder="0"
scrolling="no"
src="https://funhtml5games.com?embed=pacmandash"
></iframe>
</body>
</html>


Most Search For iframe Generator as

iframe generator | iframe generator html | iframe google maps generator | google maps iframe generator | iframe generator google maps | iframe generator responsive | multiple iframe generator | twitter iframe generator | instagram iframe generator | iframe generator html5 | iframe generator online | iframe responsive | how to make iframe responsive | iframe responsive css | iframe responsive height | iframe responsive embed | iframe embed code generator | iframe code generator | responsive iframe generator | iframe creator | iframe maker | iframe generator responsive | iframe html generator | online iframe generator | map iframe generator | website iframe generator | free iframe generator | make iframe responsive | iframe html responsive | iframe responsive css | iframe youtube | responsive youtube embed | embed youtube video in html without iframe | iframe youtube responsive | embed youtube video responsive | responsive youtube iframe | youtube video responsive | embed youtube video without iframe | iframe embed video | iframe video | iframe responsive | youtube iframe | responsive youtube embed | responsive iframe code generator | youtube iframe generator | google iframe generator | iframe html code generator | iframe responsive generator | embed code generator | youtube embed code generator | iframe embed code generator | video embed code generator | twitter embed code generator | instagram embed code generator | facebook embed code generator | free embed code generator | pdf embed code generator | embed code generator youtube | url to embed code free

Tags - iframes - iframe html - iframe in html - iframe with html


IFRAME Embed Code Generator