Find out how to combine iFrame code into WordPress simply (three strategies)

Would you like to embed an iFrame code in a WordPress post or a WordPress page?

IFrames are an easy way to embed videos or other content on your website without uploading them. Many third party platforms like YouTube allow users to use iframe to embed content from their website.

In this article, we are going to show you how to easily embed iFrame code in WordPress using multiple methods.

What is iFrame?

You can use an iFrame to embed videos or other content on your website. This means that you can display a video on your website without actually hosting the video.

The iframe is like opening a window on your site to view external content. The actual content will still be loaded from the source you are embedding from.

To add an iframe, you need to add special HTML code. Don't worry if this sounds pretty technical.

We'll show you the easiest way to embed an iFrame in your WordPress blog.

Why use iFrames?

A major reason to use iFrames is because you don't have to host videos or other resources on your site, which takes up your bandwidth and storage space.

With iFrames, you can also avoid infringing other people's copyrighted content. Instead of downloading the video or other content and then uploading it to your website, just add it to your page with an iFrame.

Another advantage is that if the original content is changed, it is automatically updated in the iFrame as well.

An image of cartoon people adding content to a website

There are also some drawbacks to using iFrames. Not all websites allow you to insert their contents into an iFrame. Also, the iFrame might be too big or too small for your page and you will have to adjust it manually.

Another problem is that HTTPS sites can only use iFrames for content from other HTTPS sites. Likewise, HTTP sites can only use iFrames for content from other HTTP sites.

Because of this, many platforms like WordPress prefer oEmbed. You can use oEmbed to embed videos, as well as some other types of content, by simply pasting a URL into your WordPress post. The content is automatically resized to fit the size and is also the correct size on mobile devices.

Important: WordPress does not support oEmbed for Facebook and Instagram posts. For more information on how to do this, check out our full guide to Facebook / Instagram oEmbed Problem and How to Fix It.

Another great alternative to iFrames is to use a social feed plugin. We recommend using the Smash Balloon plugins. You can use these to view content from Facebook, Instagram, Twitter and YouTube.

However, let's look at three different ways you can add iFrames to your website.

1. Use the source's embedded code to add iFrame in WordPress

Many large websites have an embedding option for their content. This will give you the special iFrame code that you need to add to your site.

On YouTube, you can get this code by viewing the video on YouTube and then clicking the "Share" button below it.

Click the button

Next, you'll see a popup with several sharing options. Just click the Embed button.

Click the button

Now YouTube will show you the iFrame code. By default, YouTube includes the player controls. We also recommend activating the privacy-enhanced mode.

Then click the Copy button to copy the code.

Copy the embed code for the YouTube video

Now you can paste this code into any post or page on your site. We're going to add it to a new page in the block editor.

To create a new page, go to Pages »Add New in your WordPress dashboard.

Then add an HTML block to your page.

Adding a custom HTML block to WordPress

Now you need to paste the YouTube iFrame code into this block.

Paste the YouTube HTML code into the iFrame block

You can then preview your page or publish it to view the YouTube video embedded there.

View the embedded video live on your website

Tip: If you're using the old classic editor, you can still add iFrame code. You need to do this in text view.

Adding the YouTube iFrame code in the classic editor

Switching between the visual and text view in the Classic Editor can cause problems with the iFrame code.

2. Using the iFrame WordPress plugin to embed an iFrame

This method is useful because it allows you to create an iframe to embed content from any source, even if that source does not provide any embed code.

First you need to install and activate the iFrame plugin. For more information, see our step-by-step guide on installing a WordPress plugin.

Once activated, the plugin works immediately without the need for setup. Edit or create a post or page. Then add a shortcode block.

Adding a shortcode block in the block editor

After that, you can use this shortcode to enter your iFrame code.

[iframe src = "http://www.wpbeginner.com/URL goes here"]

Just replace the url will be replaced here with the url of the content you want to embed on your website. We integrate a Google map.

Tip: You may need to use the Embed option to get the direct URL of the content. You just need to use the URL, not the rest of the embed code.

The shortcode for embedding a Google map

Next, preview or publish your post. You should see the Google map embedded on your website.

The Google map embedded on the website

Optionally, you can add parameters to the iFrame shortcode to change the display of the embedded content. For example, you can set the width and height, and add or remove a scroll bar or border. Details can be found on the iFrame plugin page.

Tip: If you're using the Classic editor, you can just paste the shortcode into your post or page. You don't have to switch to text view.

Adding the shortcode in the classic editor

3. Manually creating the iFrame code and embedding it in WordPress

If you don't want to use an iFrame plugin, you can create the iFrame code manually. To do this, you need to add an HTML block in the WordPress content editor.

Add a custom HTML block

First, you need to paste this code into your HTML block.

Just replace "url goes here" with the direct url for the content you want to embed. You only need the URL itself.

Here we are including a map from Google.

Enter the iFrame code for the Google map

You can add additional parameters to the HTML tag. For example, you can set the width and height of your iFrame. The following code means your embedded content will be displayed 600 pixels wide by 300 pixels high.

This is useful when you need to keep the embedded content in a smaller area.

The Google map on the website with a fixed height and width

We hope this article has helped you learn how to easily embed iFrame code in WordPress. You might also want to check out our ultimate guide to speeding up your WordPress site and our comparison of the best keyword research tools to improve your SEO rankings.

If you enjoyed this article, please subscribe to our YouTube channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Comments are closed.