HTML iFrame Code Generator

* Required
Optional
Optional. Width of the iFrame (use px | %).
Optional. Height of the iFrame (use px | %).

Advance Options

Add No Referrer No
  • Yes
  • No
Lazy Loading No
  • Yes
  • No

Stylize iFrame

Scrollbar Auto
  • Auto
  • Yes
  • No
Border Solid
  • Solid
  • Dashed
  • Dotted
  • None
Optional. Border width in pixels.
HTML iFrame Code

Preview:

What is the HTML iFrame Code Generator?

HTML iFrame code generator is a free online tool. You can use this free tool to generate HTML iFrame codes quickly. There are options to add important attributes like no-referrer to the iframe. 

Once generated you can preview the iframe right here before adding the code to your website.

What is an HTML iFrame and why is it used?

An iFrame also called an Inline Frame is an HTML tag used to embed a document inside an HTML page on a website. 

The iframe tag is often used to embed an HTML page inside another HTML page. It is also used by ad networks to embed display ads in a webpage. 

How to create an iFrame using this tool?

It is very simple to create iframe codes using this iframe generator tool. Just follow the few steps given below to create your iframe embed.

  1. Add the URL in the "iFrame URL" textbox.
  2. Add the iframe name in the "iFrame Name" textbox. This field is optional.
  3. Add width and height of the iframe in the "Width" and "Height" textboxes respectively. You can use either "px" or "%" as a unit.
  4. If you don’t want to send any referrer to the destination URL, select "Yes" in the "Add No Referrer" selectbox.
  5. If you want the iframe to load only when it comes to user view, select "Yes" in the "Lazy Loading" selectbox.
  6. Now use options in the Stylize iFrame section to stylize your iframe.
  7. Now click the "GENERATE IFRAME CODE" button to generate the HTML iFrame code.
  8. The generated iframe code will be available in the "HTML iFrame Code " textarea.

You can preview the generated iframe code in the "Preview" section below the textarea.,

iFrame Attributes

Hyperlink tag has several attributes which can be used to provide additional information about the linked page. Here are some of the most used ones.

SRC

The src attribute is used to add the link of the webpage or document to be embedded.

src="https://example.com/page-1.html"

Referrerpolicy

The referrer attribute is used to indicate the type of referrer information that needs to be sent while fetching the document. There are several referrer information that can be sent, but the most popular one is no-referrer. No referrer information will be sent if no-referrer is added to the iFrame.

referrerpolicy="no-referrer"

Loading

The loading is used to indicate whether to load the iFrame right away or wait for the load-in threshold to meet. Currently, the loading attribute supports three values. They are:

  • eager - load the iframe right away
  • lazy - lazy loading. Wait for the load-in threshold to meet
  • auto - the browser will determine whether to lazy load or not

As of 2022, the auto attribute is not a standard.

loading="lazy"

Scrolling

The scrollbar attribute is used to indicate whether the scrollbar will be displayed or not. It has three values and they are:

  • auto - scrollbar will appear if needed. it is the default value
  • yes - scrollbar will always be shown in the iframe element
  • no - the scrollbar will not be shown
scrolling="yes"

Width

It is a basic attribute used to specify the width of the iframe. The default width of an iframe is 300px.

width="100%"

Height

It is a basic attribute used to specify the height of the iframe. The default height of an iframe is 150px.

height="400px"

FAQ’s

Are iFrames safe to use?

Yes, an iframe is a secure way of embedding content from another site into your website. An iframe is displayed in an isolated container on a web page and it cannot affect the content of the page it is included.

What can be embedded using iFrame?

An iframe can be used to embed different things like a webpage, map, video, audio, and more. Documents like PDF and Docx can also be embedded using an iframe. It should be noted that you can only embed content from websites that allow embedding.

How to add an iFrame in a WordPress post?

It is possible to add iframes created using the iFrame code generator tool into a WordPress post. Follow the guides given below.

If you are using Classic Editor:

  • Generate the iframe using this tool
  • In your WordPress site open the post in which you want to add the iframe
  • Switch to HTML mode
  • Paste the iframe code

If you are using block editor:

  • Generate the iframe using this tool
  • In your WordPress site open the post in which you want to add the iframe
  • Add a custom HTML block
  • Paste the iframe code in it

What is the browser support for iFrame tag?

The iframe tag is a very mature technology. So most web browsers can handle it without any issues.