What is an iframe, and how do you use it on your website?

Have you ever wondered if there is an easy way to add a video or a map to your web pages from another source? The answer is yes, and it is called an iframe. It allows you to embed web pages into an HTML document with no coding required.

In this article, you will learn what is an iframe, how it works, its practical applications, and how to add it to your web pages.

Inline frames facilitate a nested browsing context where a browser displays multiple interactive areas embedded in one another on a single web page. This type of setup enables the effect of a page within a page and many more. Below is an iframe example visualizing a YouTube video.

What are iframes used for

Inline frames have many practical applications that extend the standard design and functionality of a web page. The most common use cases include:

• Embedding Multimedia Content – Iframe elements are commonly used to embed multimedia content like videos, audio files, and animations from platforms such as YouTube, Vimeo, and SoundCloud. This allows users to engage with the content directly on the visited website without navigating away from the page.
• Integrating Third-Party Applications – Web developers use iframes to integrate third-party applications seamlessly into their websites. For example, a business can embed a Google Maps widget to show its location, or an e-commerce site can include a payment gateway for transactions.
• Displaying Advertisements – Iframes are a popular choice for displaying advertisements on web pages. They can separate ad content from the main page content, which helps in managing ad scripts and tracking views or clicks independently.
• Loading External Content – Iframes can load content from external sources, such as news feeds, weather updates, or social media posts. Thus, they enrich the host website with dynamic content without complex backend integration.
• Creating a Site within a Site – Iframes can create a “site within a site” experience, where visitors can navigate another website without leaving the original page. This is particularly useful for hosting microsites or product catalogs.
• Isolating Browser-Specific Content – Developers may use iframes to isolate content that behaves differently across browsers, ensuring that it does not affect the rest of the page. This can be a temporary fix while a permanent solution is developed.
• Enhancing Design and Layout – Iframes can help create more complex web page layouts. Designers can use them to embed interactive or fixed elements within a page, such as a persistent music player or a chat box.
• Simplifying Content Updates – When the same content needs to appear on multiple pages, an iframe can be used to centralize the content in one location. This way, updates to the content only need to be made once, and the changes will automatically reflect wherever the iframe is embedded.

Iframe examples

Iframes have many practical applications beyond just a video or an image within a web page. Here are some common examples of using an iframe.

Embedded video

This is arguably the most popular application of iframes. Instead of putting a strain on your web server playing videos, you can embed videos hosted on a dedicated service like YouTube or Vimeo.

Embedded map

Google Maps makes it easier for your customers to find your business location. You can easily embed Google Maps with your pinned location using iframes.

Page within a page

If you want to incorporate a specific functionality of another website into your own web pages, you can embed a selected part or an entire page of this website with an iframe.

How to embed an iframe element into a website

The standard way of adding an iframe element is by inserting the iframe tag in the HTML code of a web page. However, depending on your website application or options provided by the source, there might be other simpler and more convenient methods. Below, we will examine the most common ways.

Adding an iframe tag to an HTML document

This is the universal way of adding an iframe to a web page. You must edit the page’s HTML code and insert the <iframe> tag that creates the area where the external content will be visualized.

Below is an example of an iframe HTML tag.

<iframe src="https://www.youtube.com/embed/mij0fmZ7lGw?si=g5ghgoRcoUou5e9R" width="560" height="315" title="YouTube video player"></iframe>

Let’s break down the elements comprising the iframe tag.

• The opening tag <iframe> identifies the element as an iFrame.
• The iframe src attribute defines the URL address of the iframe source. The external resource found on this address will be visualized in the iframe section on the web page.
• The height attribute defines the vertical size of the iframe element. You can use a fixed size (pixels) or an automatic one (set as a percentage of the screen size).
• The width attributes define the iframe width. Similar to the height, the width can take fixed or automatic values.
• The title attribute gives a description of the iframe, which can be used by search engines and visitors using assisting technologies.
• The tag </iframe> encloses the iframe code.

The example contains only a small part of the entire set of iframe attributes. There are various other attributes that modify the iframe properties in various ways, such as the sandbox attribute, name attribute, srcdoc attribute, allow attribute, target attribute, loading attribute, and many more.

Some attributes like frameborder and seamless are deprecated in HTML5 and should be handled with CSS border property instead. It’s always a good practice to refer to the latest HTML specifications or documentation for the most up-to-date information on iFrame attributes and their usage.

You can also use attributes not specific to iframes, like the style attribute. It assigns inline CSS styles for an element within the iframe content. However, defining styles in separate CSS stylesheets is recommended for better organization and reusability.

Copying the iframe code from the source

Some websites like YouTube facilitate easier content integration into iframes. They usually provide an iframe code to just copy and paste into your web page.

If you wish to embed YouTube videos, use the following steps.

1. On the video page, click on the Share button.
   

   

2. On the following pop-up window, select the Embed option.
   

   

3. A new window will appear, showing the entire iframe tag containing the YouTube embed URL. You can highlight and copy the code or click the Copy button in the lower right corner.
   

   

4. Finally, open your web page in an HTML editor and paste the code where you want the iframe content to appear.
   

   

Using WordPress Plugins

The methods above work for any type of website application. However, if your website is built with WordPress, you can add embedded content through iframes by using a plugin. One such is Advanced iFrame.

Once installed, the plugin will create a section in your WordPress menu where you can control its settings. Log into your WordPress dashboard and select Advanced iFrame from the menu on the left.

Inside the plugin’s panel, open the Basic Settings section. In the URL field, enter the address of the external source to display in the HTML iframe element.

If your theme is not block-based, you can add the iframe element by inserting its shortcode into the web page. To generate the shortcode, click the Generate a shortcode for the current settings button. Below the button, you will see the generated shortcode you can copy.

Next, edit the page or post with your preferred editor. Choose the position where you want to embed content and paste the shortcode.

If your theme is block-based like Gutenberg, inserting an iframe element is even easier. You don’t have to generate a shortcode. Simply create a block to display content with the iframe. Then, choose the Advanced iFrame widget, and the HTML content defined in the plugin’s settings will be automatically inserted.

What are the benefits of using iframes

Iframes offer several advantages that make them a valuable tool for web developers and content creators. Here are some of the key benefits:

Content enrichment

iFrames provide a simple way to enrich your website with additional content without hosting it on your server. By embedding content such as videos, maps, or social media feeds, you can offer your users a more engaging and informative experience. This adds value to your site and keeps users on your page longer as they interact with the embedded content.

User experience

Inline frames can significantly enhance the user experience on your website. Using them, you can incorporate various functionalities, such as forms, calculators, or even games, without users needing to leave your site. This seamless integration ensures users have a smooth and uninterrupted journey while navigating your website.

Flexibility

iFrames are incredibly flexible and can be used in many ways. They can be resized to fit any part of a webpage and can be made responsive to work across different devices. This adaptability makes iFrames a versatile choice for web designers looking to create a dynamic and responsive website design.

Effective server resources management

By embedding content from other sources, you can save on server resources and bandwidth. Since the embedded content is hosted on external servers, your website does not bear the load of hosting that content. That can lead to improved page performance and reduced hosting costs.

Disadvantages and risks of using iframes

Despite their benefits, iFrames also come with certain disadvantages and risks that need to be carefully considered:

Security exploit risks

One of the biggest concerns with iframes is security. iframes can be used maliciously to execute clickjacking attacks, where a user’s clicks are hijacked to perform unintended actions on another site. Additionally, if the content within an iFrame is not from a trusted source, it can potentially introduce vulnerabilities to your website.

Risks of copyright infringement

When embedding content from external sources, there is a risk of copyright infringement if proper permissions are not obtained. It’s important to ensure that the content you are embedding is allowed to be shared and that you are complying with any licensing requirements.

Negative effects on SEO scores

iframes can harm your website’s SEO if not used correctly. Search engines may find it difficult to index the content within an iframe, so it might not contribute to your site’s search rankings. Additionally, excessive use of iframes can clutter your web page. This can lead to a poor user experience, indirectly affecting your SEO performance.

Summary

Iframes are a practical way to enhance your website. They allow for embedding videos, maps, or entire web pages into a website to improve its functionality and design. However, you should use iframes with caution as they can lead to potential security risks and complications, such as embedding web pages that can infect visitors’ computers or content that infringes copyrights.

After reading this guide, you should have a better understanding of what iframes are, what they are used for, and what their pros and cons are. This will allow you to get the most out of iframes while avoiding any potential harm.