Mastering iFrame: 3 Simple Methods to Embed Code in WordPress Effortlessly

When creating websites, we often need to showcase content from external sources without hosting it ourselves. This is where iFrames come into play.

Whether you’re embedding a video, a map, or a third-party application, iFrames offer a smooth way to integrate external content into your WordPress site.

In this article, we will walk you through three straightforward methods to include iFrame code in your WordPress posts or pages. From utilizing pre-made embed codes to manually creating your own iFrames, we have all the information you need.

What Is an iFrame?

An iFrame, which stands for inline frame, allows you to embed videos or other types of content on your site without having to host the video yourself. This can help conserve bandwidth and storage space, making it advisable not to upload videos directly to WordPress.

In addition to enhancing the speed and performance of your WordPress site, an iFrame will automatically update if the original content changes. This ensures that visitors will always see the most current version of the content.

Embedding copyrighted content through an iFrame does not infringe on copyright laws, providing you with protection against potential legal issues.

Now, let’s explore how to easily embed iFrame code in WordPress. Feel free to use the quick links to jump directly to the method you wish to use:

Step 1: Quickly Embed an iFrame in WordPress Using Source Code

Many major video hosting platforms offer an ‘Embed’ feature that provides the iFrame code needed to insert into your site.

If the website includes ‘Sharing’ or ‘Embed’ options, this is typically the fastest and simplest method to add content.

The specific steps may differ by platform, but let’s use YouTube as an example. To embed YouTube videos in WordPress, click the ‘Share’ button located beneath the video you wish to use.

A popup will appear displaying various sharing options.

Next, click on the ‘Embed’ button.

YouTube will then display the iFrame code.

By default, YouTube will have the ‘Show player controls’ option selected, but we also suggest enabling privacy-enhanced mode. This setting allows visitors to view the embedded content on your WordPress site without affecting their YouTube browsing experience.

Finally, click the ‘Copy’ button.

You can easily insert that code into any post or page on your WordPress site. In this tutorial, we will demonstrate how to add it to a new page using the WordPress block editor.

Open the desired page and click the ‘+’ button. In the popup menu, type ‘HTML’ to locate the custom HTML block.

Once the correct block appears, click on it to add it to your page.

Next, paste the YouTube iFrame code into the block.

Now you can publish your page to view the YouTube video displayed on your WordPress blog.

Method 2: Embed Using a WordPress iFrame Plugin (Compatible with All Websites)

Not all third-party websites offer a pre-made embed code. If you can’t find any ‘Share’ or ‘Embed’ options, you can easily generate your own iFrame code using the iFrame plugin.

First, install and activate the iFrame plugin. For detailed instructions, refer to our comprehensive guide on installing a WordPress plugin.

Once activated, the plugin will function immediately without any additional setup. Just navigate to the page or post where you want to embed content and insert a Shortcode block.

Then, include the following shortcode:

[iframe src="URL goes here"]

Replace ‘URL goes here’ with the actual URL of the content you wish to embed on your website.

For example, let’s embed a Google Map in WordPress, which is a convenient way for businesses like stores and restaurants to provide directions on their contact page.

After that, simply preview or publish your post.

You should now see the embedded content displayed on your website.

To explore all available parameters, check out the iFrame plugin page.

Method 3: Embed iFrames in WordPress Without a Plugin

If you prefer not to use a specific WordPress plugin, you can manually create the iFrame code. Start by opening the page or post and adding an HTML block in the WordPress content editor.

First, insert the following code into your HTML block:

Replace ‘URL goes here’ with the direct URL of the content you want to embed.

In this example, we are embedding a Google Map:

You can customize the appearance of the embedded content on your website by adding additional parameters. For instance, we are setting the width to 600 pixels and the height to 200 pixels.

This is particularly helpful if you need to display embedded content in a more compact area. For example, resizing may be necessary after reviewing the mobile version of your WordPress site.

What Are Some Alternatives to iFrame?

There are certain limitations to using iFrames for embedding content.

Not all websites permit their content to be embedded in an iFrame, and you may have to manually adjust the content to ensure it displays well within the designated space.

Another consideration is that HTTPS sites can only utilize iFrames for content sourced from other HTTPS sites, while HTTP sites can only use iFrames for content from other HTTP sites.

This is why many platforms, including WordPress, favor oEmbed.

Typically, you can use oEmbed to embed videos and other types of content by simply pasting a URL into your WordPress post. WordPress will automatically adjust the oEmbed to fit the available space, ensuring it looks great on desktops, smartphones, and tablets.

To display social media feeds on your website, we recommend using a dedicated social media plugin instead of iFrames.

For instance, Smash Balloon simplifies the process of embedding content from platforms like Facebook, Instagram, Twitter, and YouTube.

Here are some helpful tutorials for integrating social media feeds using Smash Balloon:

• How to Embed Tweets in Your WordPress Blog Posts
• How to Add TikTok Videos to Your WordPress Site
• The Best Method to Embed a YouTube Playlist in WordPress

We hope this article has helped you learn how to easily add iFrames in WordPress. You may also want to explore our guides on embedding SoundCloud in WordPress and disabling embeds in WordPress.

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