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

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

The way iFrames basically work is that they let you display a webpage from another website on some portion of your own webpage by embedding it. The code inside an embedded webpage can’t be directly accessed, which creates a certain sense of content protection. 

Below, we’ll explore more about WordPress iFrame. Also, we’ve mentioned how to embed them on your site. So, let’s get started. 

What is iFrame and Why Use Them?

Consider the number of times you’ve been on a website but came across content from a completely different website on their webpage. Whether it’s videos, images, or portfolio pages, seeing them on a completely different website raises the question of ‘valid content sharing.’

Furthermore, if you own a WordPress website run by media content, you’ll have to deal with storage issues at some point. Uploading videos, images, and such content on your servers fill up space. There’s only so much hosting space available to you before it all runs out.

Whether it’s content sharing or storage space, these problems are solved by embedding the content of a separate website or domain on your posts, and the easiest way to do it is using iFrames.

WordPress iFrames lets you create a medium to display content or web pages to and from a completely different website without worrying about having the content stolen or copyright allegations.

Obviously, there are other methods for embedding content, such as using AJAX or HTML5 web elements or others, but in many cases, iFrame’s just a better choice. For one, iFrame embedding is used for Cross-Domain content, usually visual content.

What this means is that a website user can freely request the selected resources from a separate website and view it but is restricted from accessing or manipulating the element or code itself.

Furthermore, you can easily place advertisements on your website using iFrames and set up multiple iFrames on a single webpage without a lot of difficulties. This is always useful if you want to monetize your website.

---

How to Embed WordPress iFrame Easily? 

Method 1: Use Embed Code to Add iFrame in WordPress

In the first method, we’ll embed a responsive Youtube iframe in 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. 

Thereafter, a popup will appear with various options. Click on the Embed button.

The iFrame code is now shown. Further, there are 2 Embed options – Show Player Control and Enable privacy-enhanced mode. By default, 1st option is already enabled. Manually enable the 2nd option as well. 

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

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

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

Simply paste the YouTube iFrame code into this block. 

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

---

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

Embedding  WordPress iFrame is easier than you imagine. The traditional way to do so is by using the HTML attributes <iFrame>.To do this, simply take the URL of the page you want to embed, and use it as the source for the Tag. Then, your code becomes:

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

With that said, if you want, you can also add more parameters to your tag. You can define the window of the iFrame by using the params:

• Width/Height – For height and Width of the iFrame window, define values in Px
• Frameborder – For displaying or hiding the Frameborder, use values ‘0’ or ‘1.’
• Align – For defining the window’s page alignment, Use values “left” “right” “top” “bottom.”
• Scrolling – For disabling or enabling Scrolling inside the Window. Use values “yes,” “no”

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

For example, we can just take the URL “https://themegrilldemos.com/colormag/” and use it as our source. Further, build a tag for our embedded page. Then using the added attributes for customization, we get,

[html] <iframe src="https://themegrilldemos.com/colormag<strong>/</strong>" width="1000px" height ="500px" frameborder="1" scrolling="yes" align="left"> </iframe> [/html]

This is how the iFrame looks:

Following this process, you should be able to easily embed web pages on your posts. Whether it’s images, visual content, audio, or more.

---

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

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

Install and Activate Advanced iFrame

Before anything, go to Plugins >> Add New menu from the sidebar of your WordPress dashboard. Search Advanced iFrame in the search bar. Once it appears, click on the Install button, and lastly, Activate it. 

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

i)  Directly Using the Shortcode:

The direct way of using Advanced iFrame is identical to using the iFrame HTML tag, but instead, we use its shortcode.

Once you open any post or page, select the Plus (+) icon. Now, search for the Advanced iFrame block and add it. 

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

Add the URL of your choice from the setting options. For your convenience, Advanced iFrame allows you to define Width and Height without hassle. Additional Parameters are also allowed. Lastly, save all the changes.

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, so the developer has provided an easy-to-use UI to create our 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.

There are multiple values to set up for various purposes. We’ll be explaining them below:

• 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 either pixel or percentage.
• 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 frameborder.
• Transparency: You can set the value ‘Yes’ or ‘No’ or ‘True’ / ‘False’ Enabling transparency makes the transparent and displays the background on it.
• Allow Fullscreen: This is a feature for embedding videos that 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 for tons of other features; however, we’ll not be going through them as it would make the entire process complex and difficult to explain.

Click on Generate a shortcode for current settings button at the top. This generates a customized shortcode for you to copy and paste onto your posts or pages.

Similarly, if you want the current settings to stay as your default settings, you can click on Update Settings displayed at the bottom of the window to make it the default setup. 

This lets you instantly access the current shortcode using the Add Advanced iFrame button we’ve explained in the step above. Correspondingly, reset settings 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.

---

List of Some Other Popular WordPress iFrame Plugins

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

1) YouTube Embed

This plugin is useful to embed responsive YouTube videos on your site. Further, it allows you to create multiple profiles. You can add different YouTube videos to each profile as per your wish. 

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

2) iframe popup

iframe popup is yet another popular iFrame plugin for WordPress. You can display any webpage in the popup window using its URL. This plugin utilizes JQuery fancybox extension to display the iFrame popup. 

In addition, you can customize the popup attributes to match the niche of your post or page in the plugin admin page. Also, the popup window is responsive; hence, it’ll look great on all devices. 

---

Things to Remember While Embedding iFrames in WordPress

But do keep a short reminder that iFrames aren’t the complete answer to sharing media. Here are a couple of tips to remember:

1. Always keep a major check on 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.
2. Also, a huge note of importance, always makes sure to only embed content from trustable websites. Hackers can easily place 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 iFrames, you’re ready to go ahead and 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 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 Twitter and Facebook for more updates and exciting news. 

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