Why and How you should be using iFrames for Videos in WordPress?

Last updated Jul 10, 2019

You remember those old embed tags on videos? Yeah, those are going to be outdated pretty soon as the web shifts to HTML5. Almost all major video sites are switching from using Flash video embeds toward using HTML5, and we recommend that you think about doing the same for your WordPress blog. By using the iFrame tag for your videos, you ensure that your videos are displayed for people on the computer, iPhone, iPad or any other device that may come in the near future. Traffic from mobile devices are increasing at a rapid rate, and this is something that we should all be prepared for.

Youtube, Vimeo, and others have already switched to using the iFrame version as their default method of embedding videos on the web. However for security reasons, the iFrame tag disappears in WordPress when switching from Visual Mode to HTML mode, or vice-versa. It can get very frustrating if you don’t know why this is happening. You may even publish a post only to find out that your video was never included. You might think it is a bug or an issue with your WordPress installation, but it is not. But don’t worry, we have a way for you to use iFrames for Videos in WordPress without a hassle.

One way is to remove the visual editor in WordPress, and you would never have to worry about the iFrames disappearing. However by doing so, you will lose the ability to use the internal linking feature that was added in WordPress 3.1. So this is not that good of an option.

The best option is to use a plugin called Iframe. This plugin provides an easy way to insert iFrames in your posts. Here is a step by step guide to install a plugin.

Once you have installed and activated Iframe, you will get a new shortcode to use in your post. [iframe: ]

For example, by default Youtube’s iFrame embed code will look like this:

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/fUfgmRCPI0E?rel=0" frameborder="0" allowfullscreen></iframe>

With Iframe plugin, you would simply change the code to:

[iframe width=”480″ height=”390″ src=”http://www.youtube.com/embed/fUfgmRCPI0E?rel=0″ frameborder=”0″]

We recommend you start using iFrames for your videos right now and make your site accessible for mobile readers.