Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

How to Create an Iframe in WordPress With or Without a Plugin

Read Time: 8 mins

WordPress lets you upload many different types of file.

However, just because you can doesn’t mean you should.

Some formats are notorious for taking up space on your server. Depending on your web hosting plan, uploading lots of large files can quickly burn through your storage, and may even incur additional charges. Even worse, uploading third-party files to your website can land you in legal hot water.

In this post, I’ll show you how to bypass both of these problems. We’ll see how iframes can be the secret to filling your site with lots of engaging, multimedia content, without infringing copyright or destroying your page load times.

Everything You Need to Know About Iframes

An iframe is an HTML document that you embed inside another document. Many WordPress website owners use iframes to display external content, such as YouTube videos.

To embed an iframe, you’ll need to wrap the external content’s URL in HTML tags. You might also use additional parameters to customize how this content displays and functions. When it comes to these HTML tags, you have two options: write the required code manually or use a plugin to generate the HTML for you.

For many website owners, iframes are the perfect way to share large files. Although WordPress supports a range of formats, it’s not always a good idea to host this content on your website.

Large files such as lengthy, high-resolution media can take up a ton of space on your server. They can also bring your site grinding to a halt, which is bad news for the visitor experience.

Instead of uploading these files to WordPress, many people host them on an external platform, and then embed this content via an iframe. This is a win-win situation—you can wow visitors with rich content, without your page load times ballooning out of control.

With iframes, you’re not restricted to displaying your own content. Embedding is not considered copyright infringement by the United States, since you’re not actually creating a copy of the original content. The European Union also agrees ​that you can ​embed a video containing copyrighted material without infringing on the creator’s copyright.

If you want to feature third-party content on your site, then iframes are generally considered a legal and ethical solution. This makes iframes perfect for building a more engaging, multimedia website, without you necessarily having to create lots of new content.

Since they’re such a versatile and useful component, let’s explore a few different ways to create iframes—without and without a plugin.

1. Use a Custom HTML Block

Plugins are a huge part of the WordPress experience. There’s a plugin to help you perform practically any task. However, it’s not all positive!

Plugins add third-party code to your website. Over the years, hackers have exploited vulnerabilities in countless plugins, including some of the most popular and reputable WordPress plugins on the market. Some third-party software can even damage your site’s performance or introduce conflicts and bugs.

For these reasons, you may want to consider limiting your plugin use. The good news is that you can embed content without installing any additional plugins.

To create an iframe:

  • Copy the URL of the content that you want to embed. You can then wrap the link in <iframe> tags and set it as the source for your tag. For example:
  • Navigate to the page or post where you want to embed this content, and open that webpage for editing.
  • Create a new block by clicking on the little + icon.
  • In the subsequent popup, start typing Custom HTML and then select this block when it appears. This adds a new Custom HTML block to your webpage.
WordPress' built-in Custom HTML block.WordPress' built-in Custom HTML block.WordPress' built-in Custom HTML block.
  • You can now add your iframe code to this block:
An example of iframe code.An example of iframe code.An example of iframe code.

To check how this embedded content will appear to visitors, click the Preview button.

A webpage, embedded via an iframe.A webpage, embedded via an iframe.A webpage, embedded via an iframe.

If you’re happy with how this content displays and functions, then you can publish or update this page as normal. Alternatively, there are a few ways that you can tweak the standard iframe.

Firstly, you can define the width and height in pixels, for example:

By default, WordPress displays a border around the frame. You can remove this border using the frameborder="1" attribute, for example:

You can also change where this content appears on the page, using the following values: left, right, top, and bottom. For example, if you wanted to right align your iframe, then you’d use:

This will display the following output:

An iframe, created via the WordPress block editor. An iframe, created via the WordPress block editor. An iframe, created via the WordPress block editor.

2. Use a WordPress Shortcode Block

Alternatively, you can embed iframes using a shortcode. This method is similar to using the Custom HTML block:

  • Open the page or post where you want to create the iframe.
  • Click the little + icon and start typing shortcode.
  • Select the Shortcode block when it appears. This inserts a new block.
The WordPress Shortcode block.The WordPress Shortcode block.The WordPress Shortcode block.
  • Enter the following code, being sure to replace www.example.com with the URL of the content that you want to embed:

You can now preview how this content will appear, and publish your page as normal.

3. Embed a YouTube URL

With YouTube users uploading over 500 hours of video every minute, this is a hugely popular platform. Unsurprisingly, WordPress provides a built-in YouTube block, which you can use to embed video content.

To embed a YouTube video:

  • Open the page or post where you want to feature this content.
  • Click on the little + button and start typing YouTube.
  • Select this block when it appears. This inserts WordPress’s dedicated YouTube block.
WordPress' built-in YouTube block.WordPress' built-in YouTube block.WordPress' built-in YouTube block.
  • In a new tab, navigate to the YouTube video that you want to embed.
  • Copy/paste the video’s URL into your YouTube embed block.
The YouTube embed block.The YouTube embed block.The YouTube embed block.
  • Click the Embed button.

WordPress will now retrieve the video in question, and display it as part of your webpage:

A YouTube video, embedded via an iframe component. A YouTube video, embedded via an iframe component. A YouTube video, embedded via an iframe component.

You can now preview this page in the WordPress editor. If you’re happy with your embedded YouTube video, then it’s time to hit Publish (or Update!).

4. Copy/Paste the Embed Code

Many major websites offer a dedicated Embed option for their content. When clicked, this will provide an embed code that you can copy/paste into your website.

Let’s use Vimeo as an example:

  • On the Vimeo website, find a video that you want to embed.
  • Select the Share button.
A Vimeo video.A Vimeo video.A Vimeo video.
  • This opens a popup containing various sharing buttons, plus the embed code for this particular video. You can now copy this embed code.
Vimeo's sharing options, including an embed code.Vimeo's sharing options, including an embed code.Vimeo's sharing options, including an embed code.
  • Switch to your WordPress dashboard and open the page or post where you want to embed this content.
  • Click the little + icon and insert a Custom HTML block.
  • After inserting this block, add your embed code.
The WordPress Custom HTML block.The WordPress Custom HTML block.The WordPress Custom HTML block.

You can now preview how this embedded content will look, by clicking Preview in the floating toolbar. Alternatively, you can click the Preview link in the upper-right corner.

5. Install the Advanced iFrame Plugin

If you’re embedding content on a regular basis, then it may be worth installing a dedicated plugin.

Advanced iFrame makes it easy to add iframes to any page or post. It also gives you greater control over your iframes, which is perfect if you have a very specific look or functionality in mind.

These customizations include hiding the iframe until the embedded content is fully loaded, which can help improve the perceived page load times. You can also hide different areas of the iframe to ensure your visitors are focusing on the right area.

If you want to upgrade, then there’s a Pro version available, which has some additional features. For example, if you purchase an Advanced iFrame Pro license, then you’ll be able to auto-zoom the iframe. This can improve the experience for mobile users. The Pro version also boasts browser detection, so your site will automatically tailor the embedded content based on the visitor's browser.

After activating this plugin, you can insert an iframe using the following shortcode:

Make sure you replace the URL with the content that you want to display. Here, you may be interested to learn that the team behind the Advanced iFrame plugin has also published a free iframe checker application. You can use this plugin to verify whether you’re permitted to insert a particular URL into an iframe.

If you don’t want to code, then this plugin also provides an ​​Advanced iFrame block:

The Advanced iframe WordPress plugin.The Advanced iframe WordPress plugin.The Advanced iframe WordPress plugin.

After inserting this block, give it a click. This opens the WordPress Post/Block menu:

How to configure the Advanced iframe block.How to configure the Advanced iframe block.How to configure the Advanced iframe block.

In the Block menu, enter the URL of the content that you want to embed. You can also specify a width and height:

Configuring an Advanced iframe block. Configuring an Advanced iframe block. Configuring an Advanced iframe block.

You can enter these values either as a percentage of the total content area or as a pixel value. If you don’t specify a width and height value, then WordPress will use the plugin’s defaults.

If you want to take a look at these default settings, then select Advanced iFrame in WordPress’s left-hand menu. Then, select the Basic Settings tab:

The Advanced iframe WordPress plugin.The Advanced iframe WordPress plugin.The Advanced iframe WordPress plugin.

Here, you’ll find all of the default settings for the content that you embed via Advanced iFrame. There’s a lot here, so you may want to take some time to explore:

Generating shortcode, using the Advanced iframe plugin.Generating shortcode, using the Advanced iframe plugin.Generating shortcode, using the Advanced iframe plugin.

If you prefer to embed your iframes using the shortcode, then you may be interested in the Generate a shortcode for the current settings button. This button creates a shortcode containing all of the plugin’s default settings.

If you need to override these defaults, then simply add or remove attributes from this shortcode.

How to override the Advanced iframe default settings.How to override the Advanced iframe default settings.How to override the Advanced iframe default settings.

To generate this code, navigate to Advanced iFrame > Basic Settings. You can now scroll to the How to insert an iframe section, and give the Generate a shortcode… button a click.

Wrapping Up

In this post, I showed you how to embed external content on your site. By opting for iframes, you can preserve your site’s loading speeds, while avoiding any potential copyright issues.

Throughout this tutorial, we covered several methods. If you’re regularly embedding content, then you may want to check out the Advanced iFrame plugin. This plugin takes a quick and code-free approach to embedding external content. Alternatively, if you only need to create the occasional iframe, then WordPress has various built-in iframe blocks that should get the job done.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.