As the major video sites switch from using Flash for video towards using HTML5, you should think about doing the same on your WordPress blog. By using the <iframe> tag instead of the <embed> tag it ensures that your video will be displayed for people on a computer, iPhone, iPad or whatever else may be coming down the road. Basically, it helps to future-proof your site and make it as accessible as possible.
The problem with using the iframe tag with WordPress is that (for security reasons), the iframe tag disappears when switching from Visual mode to HTML mode, and back again. This can be very frustrating when you think you embed a video only to find out that it has disappeared from your post.
Luckily, WordPress plugins come to the rescue. There are several plugins that allow you to properly use iframes in WordPress. The most popular of these seem to be: Embed Iframe, IFRAME Embed for Youtube and Insere Iframe.
While the other two may be worth checking out, I went with the last of these, Insere Iframe, because it was the one with the most flexibility and also allowed the easiest rewriting of the iframe code you will get from sites like Youtube and Vimeo. Once you install and activate the plugin, you get a new [iframe: ] tag to use in your posts.
Here are two examples of how to copy and change the iframe code:
Using Vimeo Iframe Video Code in WordPress
Vimeo will give you iframe code that looks like this:
<iframe src="http://player.vimeo.com/video/14269383" width="400" height="300" frameborder="0"></iframe>
With this new plugin, you simply change that code to:
[iframe: src="http://player.vimeo.com/video/14269383" width="400" height="300" frameborder="0"]
Using Youtube Iframe Video Code in WordPress
Youtube will give you iframe code that looks like this:
<iframe type="text/html" width="425" height="344" src="http://www.youtube.com/embed/KDv5hnQ9ADk?hl=en_US" frameborder="0"></iframe>
Change that code to:
[iframe: type="text/html" width="400" height="325" src="http://www.youtube.com/embed/KDv5hnQ9ADk?hl=en_US" frameborder="0"]
That’s it. Simple and future-proof. I’d recommend making the switch now.
2 responses to “Using Iframes for Video in WordPress”
Thank you, this helped me to implement the Vimeo iframe on my blog!
WordPress removes iframe when you switch from "HTML" to "Visual" tab in your editor because of the security reasons.
You can use oEmbed shortcode to insert video: [embed width="500" height="400" ]http://www.youtube.com/watch?v=wQL34ZiCNVA[/embed]
Or you can download this plugin to insert iframe into post content using such shortcode: [iframe width="640" height="480" src="http://player