How to Embed WordPress iFrame: With and without Plugin

If you’re a blogger and a website developer, you definitely consider a site that is completely different from other website’s web pages.

Whether your content sharing or storage space, these problems are solved by incorporating the content of a separate website or domain into your posts, and using WordPress iFrames is the easiest way to do so.

If you own a WordPress website that runs your media content, at some point you will have to deal with your video/audio/image content storage issues.

The uploading of videos, images, and such content fills the space on your servers. There’s only so much room for hosting before it all runs out.

Whether your content sharing or storage space of any type of media files, these problems are solved by incorporating the content of a separate website or domain into your posts, and using IFrames is the easiest way to do so.

What is IFrame?

IFrames are being used these days and for a good reason on almost every webpage and website.

WordPress iFrames allow you to create a medium for displaying content or web pages to and from a completely different website without worrying about stolen content or allegations of copyright.

Basically, WordPress iFrames works by allowing you to display a different web page on some part of your own web page by embedding it.

The code within an embedded web page can not be accessed directly, which creates a sense of content protection.

How to embed iFrame in WordPress Without Plugin

WordPress iFrame embedding is one of the simple methods in WordPress.

The easiest way to do this is by using the <IFrame> HTML attributes. To do this, just take the URL of the page you want to embed and use it as the tag source. Your code then becomes:

[php]

<iFrame src =”your_webpage_url”>

[/php]

You can add more parameters to your tag if you want. You can define the IFrame window by using the parameters:

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

Simply paste your code into your WordPress text editor, which should easily display your post. For instance, we can only use the URL “https://www.wpbloggerbasic.com” as our source. Below are examples of embedding an iFrame.

[php]

<iFrame src =”https://www.wpbloggerbasic.com/”> width =”1000″ height =”1000″ frameborder =”1″ scrolling  = “yes” align  = “left”></iframe>

[/php]

You should be able to easily integrate any page into your posts after this process. Whether your pictures, visual, audio or more.

Embedding iFrames using Plugins

Now plugins can easily set up and customize WordPress iFrames. Now we cannot explain each plugin’s working method, but the basic idea should be universal, and most popular embedding plugins should work in the same process.

This plugin works by inserting its shortcode [advanced iframe] instead of the IFrame attribute and providing a user interface to create your custom iframe shortcodes. It’s better because WordPress deletes iFrame tags for security.

In addition, the plugin adds more customization to your tags and in general, also facilitates your work.

Install and activate the plugin.

There are two ways to use this plugin, one with the given parameters directly and the other with the user interface of the plugin.

1. Directly using the Shortcode:

The direct use of Advanced iFrame is the same as using the iFrame HTML tag but we use its shortcode instead. Once you have opened any posts, you should see the ‘Add Advanced iframe’ key.

Click on the button and the default iFrame shortcode should be inserted into the editor.

If any settings haven’t changed, the default shortcode should be:

[php]

[advanced_iframe src=”//www.tinywebgallery.com” width=”100%” height=”600″]

[/php]

2. By using the settings user interface:

It may be difficult for anyone new to WordPress or HTML to make shortcodes and add parameters, so the developer has provided an easy-to-use UI to create custom shortcodes.

First, click on the Advanced iFrame shown on the sidebar of the dashboard and direct yourself to the basic settings. That’s the menu where you will be doing most of your work.

There are multiple values to be set for various purposes. Here we will explain only the essential ones:

URL: Insert the URL of the page that you want to embed here. Advanced iFrame also checks if the URL is valid or not and allows iFrame embedding.

Margin width/height: Insert the margin’s height and width in their given boxes.

Width/Height: In this box, you can insert the dimensions for your iFrame window. You can also insert the values in either pixel or percentage.

frameborder: You can enable or disable or define the border size of your WordPress iFrame. To remove the frame border, Insert ‘0’.

Allow Fullscreen: This is a feature for embedding videos that lets the video show on the entire screen. You can enable or disable it by using ‘True’ or ‘False’

You can easily activate your iFrame window using these settings. The plugin also includes tons of other features, but we won’t pass them because it would make the whole process complex and difficult to explain.

If you are satisfied with the current settings, click on Generate a shortcode.’ This creates a custom shortcode for copying and pasting your posts.

Similarly, if you want the recent settings to remain as your default settings, you can click the Update Settings at the bottom of the window to set it to the default.

Final Thoughts:

Now you know how to use WordPress iFrame, Alternatives to the advanced iFrame plugin are also available and you are ready to test them if you want to.

As we explained previously, their working method should be the same.