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

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 iframes is a 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:

<iframe src="https://example.com"> </iframe>

• 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.

• You can now add your iframe code to this block:

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

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:

<iframe src="https://example.com" width="100px" height="100px"> </iframe>

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

<iframe src="https://example.com" frameborder="1"> </iframe>

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:

<iframe src="https://example.com" align="right"> </iframe>

This will display the following output:

2. Utilize 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.

• Enter the following code, being sure to replace www.example.com with the URL of the content that you want to embed:

[iframe src="https://www.example.com/"]

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’ dedicated 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.

• Click the Embed button.

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

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.

• This opens a popup containing various sharing buttons, plus the embed code for this particular video. You can now copy this 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.

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:

[advanced_iframe src="https://www.example.com/"]

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:

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

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

You can enter these values as either 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’ left-hand menu. Then, select the Basic Settings tab:

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:

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 defaults settings.

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

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.