WPITECH
WordPress Tutorials

How to Embed WordPress iFrame With and Without Using Plugin

WordPress iFrame

There are a bunch of questions from readers that what is WordPress iFrame? How do I embed an iFrame in WordPress? What does the use of WordPress iFrame? I am going to answer all of your questions and also show you how to embed WordPress iFrame with and without using a plugin.

What is an iFrame in WordPress?

The iFrame is an HTML tag that is used to display content from any other website on your WordPress site. It is like a window that attracts visitors to interact with another website content that is hosted somewhere else. Using WordPress iFrame you can easily embed videos without downloading and uploading them on your website.

Pros & Cons of Using an iFrame in WordPress?

There are several pros and cons of using WordPress iFrame. It would be good to be aware of both of the pros and cons of using iFrame in WordPress.

Pros

  1. iFrame in WordPress helps you to embed visual content easily.
  2. Using WordPress iFrames you can easily display multiple ads.
  3. It’s the simplest way to display content from an external resource anywhere on your WordPress site.
  4. It’s secure as the users don’t have access to the main content’s code.

Cons

  1. It will slow down the web page.
  2. It gives you security threats if it has been linked with any malicious websites.
  3. Not all devices support WordPress iFrame.
  4. It’s not a good option for search engine optimization.

Now let’s discuss how to embed WordPress iFrame now.

Embed WordPress iFrame Using a Plugin

The simple and best way to use iFrames in WordPress is by using a plugin. There are several plugins available but here I am using an Advanced iFrame plugin.

To install the Advanced iFrame plugin, simply go to your WordPress dashboard and then go to Plugins → Add New and search for WordPress Advanced iFrame plugin.

Advanced iFrame plugin

Once you installed the plugin and activated it, go to the Advanced iFrame tab from the left side menu and click on the settings tab from the top.

Basic settings tab

You can easily define the layout, such as height, width, border, and scrolling behavior of your WordPress iFrame from here.

width height WordPress iframe

Update the settings and click generate a shortcode for the updated settings button.

generate a shortcode iframe

Copy the generated code and paste it inside any of your website pages you wish to embed this iFrame.

code generated WordPress iframe

You can also change the width and height as per your requirements inside the shortcode.

After adding this shortcode inside any of your website page it looks like this.

WordPress iframe preview

I have successfully embedded iFrame to my WordPress site using the Advanced WordPress iFrame plugin.

[advanced_iFrame use_shortcode_attributes_only="true" src="https://wpitech.com" width="100%" height="600" id="advanced_iFrame" ]

I have embedded my own blog using WordPress iFrame as an example.

Embed WordPress iFrame Without Using a Plugin

You don’t have to put a large code to add an iFrame in WordPress. It is a simple HTML code that is used to add iFrame in WordPress.

<iFrame src=”your_webpage_url”>

However, you can also add additional parameters to adjust the desired width and height.

<iFrame src="https://wpitech.com/" width= “100%” height="200px" frameborder="1" scrolling="yes" align="right"></iFrame>

In the above code I have defined the width and height. I have also added a scrolling option for visitors to easily scroll the web page. I have set the container to right align as you can adjust it accordingly to “right:, “left”, “top”, or “bottom”.

Related posts

How to Protect Your WordPress Site from Rest API Attacks

WPITECH

Visual Composer Joins WordPress

WPITECH

How to Create Your First WordPress Block Gutenberg

WPITECH