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.
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.
Thereafter, a pop-up will appear with various options. Click on the Embed button.
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.
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.
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.
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 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:
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;lt;iframe src="https://themegrilldemos.com/colormag&amp;amp;amp;lt;strong&amp;amp;amp;gt;/&amp;amp;amp;lt;/strong&amp;amp;amp;gt;" width="1000px" height ="500px" frameborder="1" scrolling="yes" align="left"&amp;amp;amp;gt; &amp;amp;amp;amp;lt;/iframe&amp;amp;amp;gt; [/html]
This is how the iFrame looks:
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 plugins – Advanced iFrame.
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.
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.
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.
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.
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.
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.
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.
List of Some Other Popular WordPress iFrame Plugins
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.
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
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.
