How to Embed WordPress iFrame

How to embed WordPress iFrame? What is WordPress iFrame and what does it really do?

Now you’ve probably browsed thousands of websites with each using various forms of media like images, videos, Gifs, and audio clips, etc. Why? Because everyone wants their WordPress blog or website to be engaging, interactive, and look attractive. However, hosting all the videos and images in-house requires a lot of resources and can even impact negatively on your website’s performance.

So it’s no secret that a static web page with less content loads faster than a dynamic web page with images and videos. This is where iFrame steps in to steal the show. How? Let’s find out.

What is an iFrame?

An iFrame is an HTML tag that you can use to display content from another website on your WordPress site. You can think of it like a window that allows visitors to interact with content from another website hosted somewhere else without leaving your website.

Examples of iFrame

Let’s look at some examples where iFrames are used to display information in YouTube TV Coupon page.

Pros & Cons of Using an iFrame?

There are a few pros and cons to using iFrame, and being a webmaster you should be aware of both.

Pros

1. iFrame allows you to embed visual content freely.
2. iFrames can display multiple ads.
3. It’s a convenient way to display content from an external source anywhere on the website.
4. It’s secure as users don’t have access to the original content’s code.
5. It’s not all roses, though. While iFrame is a great way of displaying content from an external website, there are some cons to using it as well.

Cons

1. It can slow down the web page. Avoid using it unless it is needed.
2. They can pose security threats if linked with malicious websites that can infect a user’s computer.
3. Not all device types support iFrame.
4. It’s not ideal for search engine optimization.

Embed WordPress iFrame Without a Plugin

You don’t have to be a geek to write a simple code needed to add an iFrame to your WordPress site. If you have added HTML codes before, you will find this method simple to use.

The default code to use for an iFrame is:

<iFrame src =”yourwebpageurl”>

However, you may add additional parameters to achieve the desired width and height.

<iFrame src = “https://mesheble.com/ “ width= “100%” height=”300px” frameborder =”1” scrolling = “yes” align = “left”></iFrame>

In the code above, I’ve defined the width to occupy the complete width of the container and set the height at 300px.

I’ve also allowed scrolling because I want my visitors to scroll through the whole web page. However, in some cases, you may need to set it to “no” if you only wish to show a specific section of the web page.

As for alignment, I’ve set it to “left”, but you can set it to “right”, “top”, or “bottom.”