How and Why Should Using iFrames for Video on WordPress?

May 13th, 2011 by oecilkritingz | Posted under Blogging, Wordpress.

using iframeDo you remember with old embed tags videos on WordPress? Yeah, those are going to be outdated pretty soon as the web shifts to HTML5. Almost all major video sites are changing from using Flash video embeds toward using HTML5, and we suggest 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 showed for people on the computer, iPhone, iPad or any other device that may come soon. Traffic from mobile devices is growing at a rapid rate, and this is something that we should all be prepared for.

Youtube, Vimeo, and others have already switched to use 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 disappointing 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. Even so, don’t worry, we have a way for you to use Frames for Videos in WordPress without a trouble.

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 Insere Frame. 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 Insere Frame, 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 Insere Frame plugin, you would simply change the code to:

[iframe: type="text/html" width="480" height="390" src="http://www.youtube.com/embed/fUfgmRCPI0E?rel=0" frameborder="0"]

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

Related Posts Plugin for WordPress, Blogger...

Tags: , , ,

Comments are closed.