What is WordPress IFrame? How to Embed IFrame in WordPress?

Have you ever seen a relatable content such as a video or a useful web application that you thought could be useful for your website? Maybe you’ve encountered a nifty website that had something you wanted to share. Something you can flourish while staying inside legal, ethical boundaries of content copyrights? Times like these are when using a WordPress IFrame might be helpful.

In layman terms, IFrame( short for Inline Frames) is basically a separate window inside your webpage that shows a separate webpage. This lets you directly show the content of any website by directly accessing its source directly. Since IFrames implement the ‘Cross-Platform Domain Policy’, using data from a different website is completely safe. Furthermore, this lets the source owner as well as the site owner to track the views and web analytics individually.

What do IFrames do?

IFrames open a world of endless possibility and creativity in webpage designing. Thus, we don’t need to re-upload the element since the webpage is loaded directly from the source itself.

The IFrame loads independently from the rest of the components which makes the webpage more stable as even if the IFrame itself breaks, the side can function normally. Additionally, we can code the IFrame in a manner that fits the outlook of our website.

A lot of websites use IFrames to share multimedia content. Almost every third-party content-based website allows you to embed their multimedia element using IFrames. We can easily preview Web applications, Videos, Audio, images, web analytics, etc separately in this manner.

Most ads also heavily feature the use of IFrames as well. Since IFrames follow the cross-domain support system, it is easier for the advertisers to track the number of views of their ads and work accordingly.

One cannot modify IFrame’s own webpage or HTML document. Therefore, it keeps the source element intact and secure as well.

Moreover, the number of IFrames can be inserted in a single webpage. One can change the appearance of the window itself as well. So, in that sense, we can insert multiple IFrames or Ads in a single webpage without deterring the performance and speed of the website itself.

How to Use WordPress IFrame

It is pretty easy to use a WordPress IFrame. There are two different ways of inserting IFrames into your website. We have individually explained these methods below:

Traditional Method:

Traditionally we can use IFrames by directly using the HTML Code and its parameters.

This requires some level of understanding of HTML but in basic terms, we use the code:

Here you insert the URL source of the content you want to share inside the inverted commas. Next, we use the available tags for formatting the size of your window. The most popularly used ones are:

• Width/Height – These attributes define the size of your window. The size given is defined in Pixels.
• Scrolling – This attribute specifies whether or not to allow Scrolling inside the IFrame. This can be set to: Yes/No/Auto
• Frameborder –  Frameborder can be used to choose whether or not to display borders for the IFrame. This can be set to either ‘0’ or ‘1’
• Align – The align attribute defines the alignment of your IFrame. The possible values for this attributes are: Left/Middle/Right/Top/Bottom

For any other tags, refer to here.

So, using these attributes you can define the appearance of your IFrame. So, for example, we can use:

Now, all you need to do is paste it into the Gutenberg. If you click on the preview tab, you can even see how it will look for your visitors.

If you are using the Classic editor, just paste it into the text editor and you’re done.

By doing this, we get an output that looks like :

Thus, by using the URL of an element, website or webpage we can build our own IFrame.

Using Embed Links:

Most third-party content websites allow you to share their content by embedding their content. To that extent, most of them allow users to copy a pre-built IFrame code and copy it into the WordPress editor.

Embedding becomes much easier in this fashion and almost any beginner can use this method easily.

The basic process for this is identical to almost every popular content based website. For example, let’s use a Youtube video as it is one of the most popular forms of Embedded content. We will be taking the following video and embedding it onto a page:

https://www.youtube.com/watch?v=pZEQEQB-qXw

If you want to create an uncustomized WordPress IFrame, pasting the URL directly to the visual editor builds an IFrame automatically.

 

But if you want to build a customized window, set to your own preferences you can either use the HTML editor and code the parameters to get the desired output.

For example, we can use the above attributes to get:

<iframe src=”https://www.youtube.com/watch?v=pZEQEQB-qXw” frameborder=”0″ height=”500px” width=”500px” scrolling=”auto” align=”right” name=”ASDASDSAD>

Alternatively, you can directly receive the embed IFrame code of any youtube video. For, this just open the required video on youtube. Then, click on the share button that is below the video window and then click on Embed afterwards.

This shows you the Embed code for the video which you can copy. You can further change the embed window’s options to suit your website.

So we get,

Using this method lets you turn on/off some of the embedding features youtube allows such as Player controls, suggested video lists and privacy mode

All you need to do is insert that code into your WordPress post or page and you’re set.

 

Almost every popular website allows you to share their content in a similar fashion and all of them feature a handy share button in their posts.

Concluding:

Now that you’re aware of how a WordPress IFrame works and how to embed them you can share content on the go without any issues. But a huge word of caution:

ALWAYS make sure that the website you take the IFrame code is trustable and secure. Hackers can hide a malicious IFrame code snippet onto either the embed code or the source element itself. This lets them track information of your viewers, and install malware, adware, and other such notorious elements into their PC. So we cannot stress the need for checking the IFrame code to make sure there’s not a suspicious URL such as a PHP code. You can read more on this here.

So stay safe and keep your website’s reputation high and make sure your site visitors don’t feel troubled by using your website. To learn more about improving your WordPress site, read these articles:

• Removing Powered By WordPress footer link.
• How to clear WordPress cache
• Adding Rich Snippets to WordPress