What is an iframe?

When we need to embed an external page (or any other page of our website) inside one of our website page, we could achieve it only with iframe technique. Generally, iframe is used to embed videos in pages (such as YouTube videos). But sometime, we are required to embed one whole portal as an iframe. Let’s take WHMCS as an example. WHMCS is one of the most powerful billing and client management software used by many hosting companies. If we are running a web hosting company, obviously we will add WHMCS portal in the form of iframe (to avoid editing WHMCS template files to match our site branding and navigation) in our website. To do so, we embed the URL of our WHMCS portal in a page of our website.

How to insert an iframe

How to embed a webpage inside any other page using iframe

The most simple method to add a page as n iframe is using HTML code

<iframe src=”http://externalpage/”></iframe>

If you want to specify height and width to the iframe:

<iframe src=”http://externalpage/” width=”800px” height=”800px”></iframe>

If you want to disable scroll bar

<iframe src=”http://externalpage/” width=”800px” height=”800px” scrolling=”no”></iframe>

Replace red text with the URL of the page that you want to embed

But sometimes, WordPress doesn’t accept iframe code as shown above and clear the iframe code automatically.

To avoid this issue I am listing best available iframe plugins for WordPress to embed pages and videos

iFrame Shortcode by Flyn San (to embed webpages only)

How to add iframe with this plugin

iFrame Shortcode plugin

iFrame Shortcode plugin 1

iFrame Shortcode is a WordPress plugin to embed any external webpage in WordPress pages, posts or even in widgets. Embedding a url with this plugin is very easy. You will not need to assemble the shortcode. There is an iframe insert button in WordPress text editor that triggers a popup wizard to customize your iframe appearance. You can easily insert your iframe url, width and height, scrollbar etc.. Shortcode is generated automatically and inserted in the page. This shortcode can also be used in a widgetized area.

iFrame Shortcode plugin is perfect for those who are not comfortable working with shortcodes as this plugin generates shortcode automatically.

Note – This plugin can’t be used to embed YouTube videos.

Advanced Responsive Video Embedder (embed videos)

How to embed video with this plugin

Advanced Responsive Video Embedder 1

Advanced Responsive Video Embedder 2

This plugin is perfect for those who embed YouTube, Vimeo, Dailymotion, Facebook, Blip etc.. videos into their WordPress website. With the help of this plugin you can add videos in responsive format. This plugin adds an “Video embed” button in WordPress text editor and with the help of it user can easily embed videos from several services including YouTube.

With this plugin embedder, you can not only embed videos but also customize several things regarding that video such as video alignment, width/height, thumbnail, autoplay etc..

Note – You can’t embed pages (as iframe) by this plugin.

Other plugins

iFrame plugin by webvitaly

It is a simple iFrame plugin that enables a shortcode to embed external pages. On activating this plugin, you can add an iframe using this shortcode –

[iframe src=”http://www.youtube.com/embed/4qsGTXLnmKs” width=”100%” height=”500″]

Advanced iFrame

How to use Advanced iFrame plugin

Advanced iframe

Advanced iframe 2

Advanced iFrame is though an advanced plugin but it doesn’t seem a user friendly one. This plugin offers many features to customize iFrame but most of the features are available in its pro version. It adds a shortcode insert button in WordPress text editor. But the added shortcode needs to be customized manually.

The pro version of this plugin offers some innovative features such as displaying a part of a webpage in iframe. But I have to say that to make use of Advanced iFrame, you should be more than a beginner WordPress user. Advanced iFrame Pro is an unprecedented iFframe plugin that leverages extensive options to customize iframe appearance.

Note – Free version of this plugin doesn’t support video embedding

Tip – Use BJ Lazy Load plugin to enable lazy loading of your iframe content. This makes website load faster. If you enable lazy loading, the iframe content (video or a page) will not load until the page is scrolled to the iframe. Particularly, if you have autoplay enabled videos in iframes, you do use lazy loading for them.

About Shams

Shams, a professional blogger, has expertise in WordPress and Web Hosting. He is used to playing around with WordPress plugins, themes, web hosting services and some other innovative stuff regarding web design. He sifts out good stuff for web designers and reviews it to help them choose what they really need.

Being an energetic tech enthusiast, he regularly pens down breaking news and tutorials related to technology particularly Smartphones and other gadgets. Sometimes writes tech tips too. It was the dawn of Internet age when he started dabbling in it and has since been delving into the realm of the internet. He occupies a permanent burrow in virtual world.

He can be reached at.- here