What Is an iFrame? (And How to Use Them)

What Is an iFrame? (And How to Use Them)

With websites becoming more complex, it only makes sense that WordPress users would need a means of displaying third-party content on their own pages. Fortunately, there’s a HTML element called an iFrame to help you do this.

In this post, we’ll explain what an iFrame is and when it’s best to use one. We’ll also discuss this element’s benefits for WordPress users, and show you how to easily incorporate it via some of our Divi Builder Modules.

Let’s dive in!

What Is an iFrame?

You can think of an inline frame (or iFrame) as a window on your web page looking out on another piece of online content. The more technical way to describe it is a HTML document embedded inside another HTML document:

Code-wise, every iFrame includes <iframe> HTML tags as well as an src attribute to help indicate the location of the content you want to embed on your site. However, there are also other attributes you can incorporate to specify the dimensions of the “window” itself.

For instance, here’s the code for the simple example iFrame in the screenshot above:

<iframe src="https://www.elegantthemes.com" height="630" width="1920"></iframe>

In this case, the <iframe> tag includes the URL of the page to be displayed, and the height and width of the window in pixels. You could incorporate other attributes to enable feature policies (allow), fullscreen mode (allowfullscreen), payments (allowpaymentrequests), and more.

It’s important to note that there are many iFrame attributes not supported by HTML5 (such as scrolling). As such, make sure you’re using up-to-date information when hand-coding your iFrames.

When Should You Use an iFrame?

The primary purpose of an iFrame for most non-developer WordPress users is to display third-party content on your site. Some common uses include:

  • Ads. Many sidebar and banner ads are actually iFrames. This enables your advertising partners to easily provide and maintain the content they’re paying to display on your site.
  • YouTube Videos. The YouTube embed code utilizes an iFrame to display a video hosted on its platform on your page. Using this technique, you don’t have to worry about uploading the video to your Media Library.
  • Google Maps. If you’ve ever ordered food from a restaurant for delivery, you may have seen a Google Maps iFrame when selecting the nearest store location. Unfortunately, Google has since replaced this with its Maps API Key, so new users cannot embed maps via iFrames.
  • Social media posts. One way to display your most recent social media posts is via an iFrame. This is convenient because they will update automatically to include likes, comments, and other dynamic elements (as we’ll explain shortly).
  • RSS Feed. Like ever-changing

[…]

 



This article was written by Will Morris and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top