HTML iFrame Generator and Styler

Generate HTML iFrame embed code and style it easily. Adjust the settings, preview it and fine-tune the code in the instant HTML editor.

Our Free Online HTML iFrame Generator is an easy-to-use tool designed to help web developers, bloggers, and website owners create customized iFrame code effortlessly.

Whether you need to embed videos, display external content, or include forms from other websites, our generator simplifies the process, saving you time and effort. All you have to do is adjust the settings and generate the code.

Iframe Settings

SRC or SrcDoc

The src and srcdoc attributes of the <iframe> tag play crucial roles in determining the content displayed within.

• • src: Points to an external URL. The content is fetched from the web.
  • srcdoc: Contains inline HTML code. The content is directly provided within the attribute itself.

• Combined Usage: If you define both src and srcdoc attributes then the srcdoc will overrule and display the HTML content instead.

Width and Height

The size of the iframe can be controlled using the width and height attributes, as well as through inline styles defined via the style attribute. Here's an explanation of each method and how they differ:

• Using width and height tag attributes, their values being expressed in pixels:

  <iframe src="https://wordhtml.com" 
  width="600" height="400"></iframe>
  

• Inline Style width and height controls the size using CSS, allowing more flexibility, allowing both pixels and percentages, making the frames responsive and mobile design-friendly:
  

  <iframe src="https://html6.com" 
  style="width: 100%; height: 400px;"
  ></iframe>
  

Border Styles

By default, iframes have a 2 pixels-wide grey border around them. However, you can customize this behavior in a few ways:

To remove the border🖼️ use the frameBorder="0" attribute directly in the iframe tag or apply CSS to the iframe using the style attribute: style="border: 0;"

If you want to override any default styles applied to iframes, you can use CSS. For example:

• Inline tag attribute: style="width: 100%; border: 5px dashed #CB625C;"
• In CSS file:

  iframe {
      width: 100%; 
      border: 5px dashed #CB625C;
  }
  

Scrolling

Scrolling behavior is an important aspect to consider. You can hide the scrollbars if the content overflows the frame.

1. Scrolling Options:

   • By default, iframes have automatic scrolling enabled. This means that if the content inside the iframe exceeds its dimensions, scrollbars will appear automatically to allow users to navigate horizontally and vertically.
   • You can explicitly set the scrolling behavior using the scrolling attribute in the <iframe> tag. There are three possible values:
     • scrolling="yes"(default): Both horizontal and vertical scrollbars are shown if needed.
     • scrolling="no": No scrollbars are displayed, even if the content overflows.
     • scrolling="auto": Scrollbars appear only when the content exceeds the iframe’s dimensions.
   • Example:
     

     <iframe src="https://pranx.com/" 
     width="400" height="600" 
     scrolling="no"></iframe>
     

2. CSS Styling:

   • You can also control the iframe’s scrolling behavior using CSS. For instance:
     

     iframe {
           overflow: auto; 
             /* or 'scroll' or 'hidden' */
     }
     

     • overflow: auto;: Scrollbars appear as needed.
     • overflow: scroll;: Always show scrollbars (even if content fits).
     • overflow: hidden;: Hide scrollbars completely.
3. Fun Fact 🤡:
   The scrolling attribute is flagged as obsolete by the W3 Validator, but the latest Chrome browser doesn't support the CSS solution. We advise to use both scrolling="no" and style="overflow:hidden;" if you want to make sure to hide the scrollbars.
   

Allow FullScreen

When you include allowfullscreen in an iframe, it allows videos or other embedded elements to be viewed in fullscreen mode. This attribute is now considered a legacy attribute and has been redefined as allow="fullscreen". Browser support may vary, and some platforms might not fully implement this attribute yet.

Enabling this option the iFrame generator will add the following tag attributes to the code: allow="fullscreen" allowfullscreen

Lazy Loading 🐢

By default, iFrames load immediately with the page (loading="eager").

Setting this attribute to "lazy" ⏳ defers loading of the iframe until it reaches a calculated distance from the visual viewport, as defined by the browser. The intent is to avoid using the network and storage bandwidth required to fetch the frame until the browser is reasonably certain that it will be needed. This improves the performance and cost in most typical use cases, in particular by reducing initial page load times.

Note: Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure.

Sandbox ⛱️

The sandbox attribute allows you to apply extra restrictions to the content within an <iframe>.
When present, it can:

• Treat the content as being from a unique origin.
• Block form submissions.
• Disable script execution.
• Prevent links from targeting other browsing contexts.
• Restrict content from using plugins (such as <embed>, <object>, or <applet>).
• Block automatically triggered features (like video autoplay or form control focus). You can specify individual restrictions using space-separated values, such as sandbox="allow-scripts allow-forms". This provides fine-grained control over what the embedded content can do.

<iframe src="https://htmliframe.com/" sandbox="allow-forms"></iframe>

Possible Values: (no value) means no restrictions, allow-forms, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-popups, allow-popups-to-escape-sandbox, allow-presentation, allow-same-origin, allow-scripts, allow-top-navigation, allow-top-navigation-by-user-activation

Keep in mind that browser support may vary, so test thoroughly!

Title

The title attribute in the <iframe> tag is used to describe its contents to people using assistive technology. When you include an iframe in your HTML, it’s good practice to always include a title attribute. Although no tooltip appears for the title, screen readers use it to read out what the content of the iframe is.

This helps visually impaired users understand the purpose of the embedded content. Remember that the title attribute is not interchangeable with the name attribute; the former labels the frame for users, while the latter is used for scripting and window targeting. If you’re creating accessible web content, providing meaningful title attributes for your iframe elements is essential! 

Leave the input field empty if you don't wish to add title tag to your generated code.

Name

The name attribute in the <iframe> tag assigns a name to the iframe, which can be used as a reference in JavaScript. Additionally, the name attribute acts as a target for other elements, such as <a>, <form>, and <base>.

It also defines the browsing context, essentially creating a mini-browser within the main browser. This context includes session history and a Document object, similar to a regular browser. So, when working with iframes, remember to provide meaningful names to enhance accessibility and facilitate interaction!

Main Features of Our iFrame Generator

• User-Friendly Interface👆 Our intuitive interface allows you to generate iFrame code with just a few clicks, picking from the templates in the header or building your custom styles, making it accessible for users of all skill levels.
• Live Preview🧐 See the changes you make to the HTML code in real-time, as you type. Click the triangle arrow to preview the adjusted code. Preview how your iFrame will appear on your site before finalizing the code and publishing on a live site.
• Customizable Settings⚙️ Adjust the width, height, and border of your iFrame. Choose whether the iFrame should have a scrollbar, or set it to automatically adjust its size to the content.
• URL Input🌐 Simply paste the URL of the content you want to embed, or switch to SrcDoc and enter a custom HTML code instead. The tool will generate the appropriate code instantly.
• Responsive Design Options📱 Ensure your iFrame content looks great on any device by enabling responsive design features. Set the width to 100% or set a small pixel size.
• Copy to Clipboard📋 Once your iFrame is configured to your liking, copy the code to your clipboard with one click, under the syntax-highlighted source editor.

The Most Common iFrame Embeds

The most common iframes are typically used to embed content from popular web services and platforms, including videos, maps, social media posts, music, forms, and more, making them versatile tools for web developers to enhance the functionality and interactivity of their web pages.

1. Embedding External Content: If you want to display content from another website, like a YouTube video, Google Map or social media widget, iframes are handy. Most of these sites have an Embed option in their Share screen:
   
   To generate an embed code for a YouTube video, click Share, then select the Embed< > option and Copy the code.
   
   To embed a Google map, click Share, then select "Embed a map".

2. Isolating Third-Party Widgets: When integrating third-party widgets (like a booking form or chat widget), iframes provide isolation. They prevent the widget’s styles or scripts from affecting your main page.

3. Creating Ad Banners: If you’re building ad banners or promotional content, iframes allow you to encapsulate the ad code. This way, it won’t interfere with your site’s layout or functionality.

4. Tracking Pixels: Each time a page loads, an iframe sends a request to the server to count the visitor and to track user engagement.

5. Loading Dynamic Content: If you need to load dynamic content (e.g., a live stock ticker or weather widget) without refreshing the entire page, iframes are a good choice.

Remember to use iframes judiciously, considering performance, security, and accessibility!

List of iFrame Tag Attributes

Back 2 Top ⇑