Tag Archives | html5

Using Iframes for Video in WordPress

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.


Cool HTML5 Boilerplate Template

Looks like a cool HTML5 template to start any project with.  Here’s the description from their site:

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site.
After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain ajax and flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.
Boilerplate is not a framework, nor does it prescribe any philosophy of development, it’s just got some tricks to get your project off the ground quickly and right-footed.