TIPS AND TUTORIALS

How to Embed WordPress iFrame Easily? (3 Best Ways)

Last Updated: 10 mins By: ThemeGrill Author

WordPress iFrame is used on almost every website and webpage these days, and for a good reason. 

iFrames allow you to embed content from other webpages, videos, or other sources on a portion of your webpage.

The code inside an embedded webpage isn’t directly accessible, which creates a certain sense of content protection. 

Let’s explore WordPress iFrames in more detail. This article will also teach you how to embed them on your site. So, let’s get started. 

WordPress iFrame – What is it?

What is WordPress iFrame? An iFrame is an HTML element used to embed another HTML document within a WordPress page or post.

WordPress iFrames lets you create a medium to display content or web pages to and from a completely different website. You don’t have to worry about having the content stolen or about copyright allegations.

Content Sharing WordPress iFrame

Besides, owning a WordPress website rich in media content like videos and images can quickly consume your server’s storage space.

Thus, embedding content from other websites or domains into your posts using WordPress iFrames offers an efficient solution to this issue. It helps preserve hosting space while seamlessly integrating diverse content.


Why Use WordPress iFrame?

When it comes to using iFrames in WordPress, several key advantages make them versatile elements. Some common uses include:

  • Third-Party Content Embedding: Display content from external sites like YouTube or Google Maps without recreating it.
  • RSS Feed Integration: Easily embed RSS feeds from external sources using iFrames by setting the feed URL in the ‘src’ attribute.
  • Security: Offers protection against security vulnerabilities by isolating embedded content from your site’s data.
  • Display Control: It shows external content as it is without allowing further edits, which is ideal for content from other CMS platforms.
  • Responsive Design: iFrames can be styled in responsive ways, adapting to various device sizes without affecting your site’s layout.

How to Embed WordPress iFrame Easily? 

Learn how to embed an iFrame in a WordPress site easily. This guide offers step-by-step instructions for enhancing your website’s functionality and content presentation using iFrames.

Let’s dive in!

Method 1: Use Embed Code to Add iFrame in WordPress

In the first method, we’ll embed a responsive YouTube iframe on the WordPress website. This method is useful to add a video tutorial to your post or page

First and foremost, visit the YouTube channel and click on the video you want to embed on our post/page.

For example, in this section, we’ll embed a video tutorial by ThemeGrill to import the demo content using the ThemeGrill Demo Importer plugin. 

P.S.: You can watch the video on our YouTube channel as well. 

Next, below the video, you can observe various icons such as Like, Share, Save, and so on. Select the Share option. 

Video Share Button - WordPress iFrame

Thereafter, a pop-up will appear with various options. Click on the Embed button.

YouTube Video Embed - WordPress iFrame

It shows you the iFrame code and two embed options: Show Player Control and Enable privacy-enhanced mode. The first option is already enabled by default, so you must enable the second option manually. 

Now, go ahead and copy the code by clicking on the Copy option.

Copy Embed Code - WordPress iFrame

You can paste the code into your WordPress post/page. So, go to your WordPress dashboard and navigate to Pages >> Add New or Post >> Add New

Navigation Add New Page - WordPress iFrame

Now, give your page a title. You can also add some content of your choice. Next, click on the Plus [+] icon, search for the HTML block, and add it to your page.

Add HTML Block - WordPress iFrame

Simply paste the YouTube iFrame code into this block. 

Responsive YouTube Video Embed - WordPress iFrame

You can Preview the page and see how it looks. If you’re satisfied, hit the Publish button.

ThemeGrill YouTube Video

Method 2: Create iFrame Code Manually (Using HTML Block)

Embedding WordPress iFrame is easier than you might have imagined. The traditional way to do so is by using the HTML attribute <iframe>.

To do this, simply take the URL of the page you want to embed and use it as the source inside the <iframe> HTML tag. Then, your code looks something like this:

<iframe src=”your_webpage_url”> </iframe>

Note: Keep in mind that some WordPress websites don’t allow embedding their URL into different origins because of security measures. Some only allow the embedding of iFrames at the same origin. For instance, if you add the iFrame URL https://themegrill.com/, you’ll get a message something like this: 

Refuse to Connect Message

That’s because ThemeGrill’s Developer team has forbidden different origins from embedding the iFrame code. However, you can embed the demos on your site. 

You can also add more parameters to your tag by defining the window of the iFrame. To do so, use the parameters mentioned below:

  • Width/Height – For height and width of the iFrame window, define values in Px
  • Frameborder – To display or hide the Frameborder, use values ‘0’ or ‘1.’
  • Align – To define the window’s page alignment, use values “left,” “right,” “top,” and “bottom.”
  • Scrolling – To disable or enable scrolling inside the Window. Use values “yes,” “no”

Then, simply go to the post/page where you want to embed iFrame code. Now, select the HTML block and paste the code into the text editor

For example, you can just use the URL “https://themegrilldemos.com/colormag/” as your source. Further, build an HTML tag for the embedded page.

Next, use the attributes mentioned above for customization. Here’s what it will look like:

[html] &amp;amp;amp;amp;amp;lt;iframe src="https://themegrilldemos.com/colormag&amp;amp;amp;amp;lt;strong&amp;amp;amp;amp;gt;/&amp;amp;amp;amp;lt;/strong&amp;amp;amp;amp;gt;" width="1000px" height ="500px" frameborder="1" scrolling="yes" align="left"&amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;gt; [/html]

This is how the iFrame looks:

Embed ColorMag Demo - WordPress iFrame

Following this process, you should be able to embed web pages in your posts. It’s also easy to embed images, visual content, audio, or other media.


Method 3: Embed iFrame Using a Plugin (Advanced iFrame)

The last method to add iFrame in WordPress is by using a plugin. For this tutorial, we’re going to use one of the most popular iFrame WordPress pluginsAdvanced iFrame.

Advanced WordPress iFrame Plugin

Here’s a step-by-step guide:

Install and Activate Advanced iFrame

Before anything, go to Plugins >> Add New menu from your WordPress dashboard. Now, search Advanced iFrame in the search bar.

Once it appears, click on the Install button and then Activate it. 

That’s how you install the plugin.

Activate Advanced iFrame WordPress Plugin

There are two ways to use this plugin: directly by using the given parameters and via the plugin’s user interface. 

i)  Directly Using the Shortcode:

The direct way of using the Advanced iFrame WordPress plugin is identical to using the iFrame HTML tag. However, we only use its shortcode.

Once you open any post or page, select the Plus [+] icon. Then, search for the Advanced iFrame block and add it.

Advanced iFrame WordPress Plugin Block

The block setting options will appear on the right side of the page editor. By default, the TinyWebGallery Blog iFrame is also present. 

Next, add the URL of your choice from the setting options. For your convenience, Advanced iFrame allows you to define Width and Height without hassle.

You can also add other parameters under the Additional parameter. Lastly, save all the changes.

WordPress iFrame Parameters

ii) By Using the Settings User Interface:

The process of making shortcodes and adding parameters might be difficult for someone new to WordPress or HTML.

Hence, the theme developer has provided an easy-to-use UI to create customized shortcodes.

First, go to Advanced iFrame from the sidebar menu. There are plenty of options; however, you need to direct yourself to Basic Settings. This is the menu where you’ll be doing most of your work.

Advanced WordPress iFrame Menu

There are multiple values to set up for various purposes. Here’s what they all are for:

  • URL: Insert the URL for the page you want to embed here. The plugin also checks if the URL is valid and allows iFrame embedding.
  • Width/Height: Here, you can insert the dimensions for your iFrame window. You can insert the values in pixels or percentages.
  • Margin width/height: Insert the margin’s height and width in their respective boxes.
  • Frameborder: You can enable, disable, or define the border size of your iFrame. Inserting ‘0’ removes the frame border.
  • Transparency: You can set the value ‘Yes,’ ‘No,’ or ‘True’ / ‘False.’ Enabling transparency makes it transparent and displays the background.
  • Allow Fullscreen: This feature for embedding videos lets the video take over the entire screen. Enable or disable it using ‘True’ or ‘False’. 

Using these settings, you can easily enable your iFrame window.

The plugin also provides many other features; however, we’ll not discuss them here as it would make the entire process complex and difficult to explain.

Now, click on the Generate a shortcode for the current settings button at the top. This generates a customized shortcode that you can copy and paste onto your posts or pages.

Generate Shortcode - WordPress iFrame

Similarly, if you want the current settings to be your default settings, you can click on Update Settings displayed at the bottom of the window. 

Update and Reset - WordPress iFrame

This lets you instantly access the current shortcode using the Add Advanced iFrame button, as we’ve explained in the step above.

Correspondingly, Reset Settings is to reset the default shortcode.

You can now copy this shortcode and paste it into any of your posts or pages to render the iFrame window.

Advanced iFrame WordPress Plugin Embed Code

Besides Advanced iFrame, here are some other useful iFrame WordPress plugins. 

1) YouTube Embed

This iframe WordPress plugin is useful for embedding responsive YouTube videos on your site. It also allows you to create multiple profiles and add different YouTube videos to each profile. 

YouTube Embed

Additionally, you can create your own playlist of videos and play them in whatever order you want. It also allows for the automatic generation of a playlist based on the user name.


2) Simple iFrame

Simple iFrame is an easy-to-use, free iframe WordPress plugin that lets you add iframes using the Gutenberg editor

Simple iFrame

Once you install and activate it, you get a new ‘iframe’ block to insert on the website. Just insert the website’s URL you want to show, and Simple Iframe does the rest.

You can see what it looks like right in the editor.


Things to Remember While Embedding iFrame in WordPress

Keep in mind that using iFrames isn’t the ultimate way to share media. Here are a couple of tips to remember:

  • Always check the number of iFrames you embed on a single webpage. Embedding too many iFrames can hamper your website’s loading speed, as they require separate resources to load onto the page.
  • Also, it’s extremely important to embed only content from trustworthy websites. Hackers can easily insert a malicious injection inside their embed and cause multiple kinds of damage to your website. So, be aware of what kind of content you’re sharing.

Wrapping It Up!

Now that you know how to use WordPress iFrame, we hope you’re ready to share cross-domain content.

There are other ways to embed content as well, but iFrames are the best medium for beginners as they are extremely easy to set up. 

Also, check whether or not the web page allows embedding their iFrame code. We’ve used three different methods above. Choose the one that suits you best. 

Did you learn something new today? Then, why not share it with your friends and family via social media? You can also follow us on X (formerly Twitter) and Facebook for more updates and exciting news. 

Lastly, here’s an interesting article on how to make money selling courses online

mm

ThemeGrill Author

We are a team of SEO copywriters and editors who work both individually and in the team. ThemeGrill author is where one of the editors here is working on one project personally. Write to us @themegrill_blog in Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top

Pin It on Pinterest