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 embed a webpage inside any other page using iframe
The most simple method to add a page as n iframe is using HTML code
If you want to specify height and width to the iframe:
If you want to disable scroll bar
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 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
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.
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″]
How to use Advanced iFrame plugin
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.