A Look At The New HTML5 Based Youtube Embed Format
While originally only providing a single way to embed Youtube videos in your website (or a plugin that emulated that), Youtube has been beta testing a new way to embed videos that brings some great new features.
I have been using this method extensively here at Just-Ask-Kim.com for several months… however, this was one of those things that I wanted to spend some time testing (and give a chance to become a more well developed beta) before I introduced so there would be fewer hiccups.
If you embed videos manually (meaning copy/paste the embed code into your HTML tab) you have likely seen this option…
This method of embedding came about because of the varied types of devices we use to view videos online today (namely aimed at the rising smartphone market) and because of the desire for an HTML5 compatible embedding method.
Does Mobile Support Matter For Video Blogging & Marketing?
As you can see here in the last 30 days, approximately 2% of my visitors… 170 visits… arrived via a smart phone (and one that was not pretending to be another browser as some do).
So whats the problem? The problem is that, for those mobile visitors, any post that has a video in it, and is using the traditional embed code, simply has a blank gap in the post.
Mobile visitors to sites making use of a lot of video do not even get a message that says “We’re sorry your device can not view our video”…. no, they get a blank spot.
Do I (or you) really want 170 visitors per month seeing a half blank post and leaving confused and frustrated?
Probably not…. And Google/Youtube agrees!
How The IFrame Embed Codes Help
This is the embed method that its going to be essential to switch up to as more and more mobile devices (such as the iPad) make it super easy to surf online yet do not support a full featured browser with Flash extensions etc.
Now, Youtube has begun extending on this new embed model, adding a really cool Youtube “Watch Later” feature that acts like a bookmarking system.
New IFrame Embed Codes:
(That’s pronounced i-Frame)
The new codes look like this:
<iframe type=”text/html” width=”640″ height=”385″ src=”http://just-ask-kim.com/wp-content/uploads/2011/01/embed”VIDEO_ID” frameborder=”0″>
It’s also been found that this code can be modified to support a playlist within the IFrame using:
It is worth noting that not every video in the Youtube collection can be rendered in a mobile compatible format. These videos still work nicely with the IFrame embed codes but they may still not work on a mobile device. I’m sure there are a number of factors that go into this (probably including age of the video) but I have had no issues getting my own to work so far.
While it did not originally work in Google Reader, that has been fixed and the videos play just fine there now. (It would be my assumption these new embed codes work “as is” for Blogger blogs, being another Google property or will in the near future, but I have not verified that.)
Also if you’re working within XHTML coding standard, iFrames will not work as they are depreciated. This means the site will not validate for strict XHTML which many consider important. (I’m staying OUT of that argument!)
This is part of why there are some challenges using these videos on WordPress and I have an upcoming post on How to use Youtube IFrame Embedded Videos on WordPress.
There have been some issues yet getting them fully working in iPhone but that support is coming and at least currently the visitor gets a video box that (while it doesn’t work) at least lets them know your post wasn’t blank!
Switching To IFrame Embed Type: Now Or Later?
There are two factors that have a huge impact on whether you need to worry about getting switched over sooner rather than later.
1) Are you primarily video blogging. If so you owe it to your readers to make your video viewable to all of them – AND – you can’t afford the loss of traffic without other posts to help make up for a few oddities.
2) Are you blogging about blogging, tech, social media etc? In these markets, your readers are often way more web savvy and have a much higher likelihood of visiting you from their cell phone type devices.
For example, since I blog in social technology, and since I do a lot of video tutorials, and since many of my readers are small business owners I felt it was VERY important that I switched up early.
A mommy blogger on the other hand, whose primary market is other moms, likely does not have as tech savvy of a crowd. For her, the question is going to be how much of the experience of visiting her blog is dependent on being able to view video. (ie: are all of her posts in video format? or only a handful? are they the meat of the post? or only supporting content?)
The new IFrame embed codes are likely here to stay. While it will frustrate some that they are not XHTML compliant (neither are most of the Amazon embed codes) they’re likely to become a very important part of many of our sites.I do not anticipate the switch over “breaking” the old embed codes at least not in the near future.
Some work arounds (or plugins) need adjusted to get them working on WordPress and I will talk more about that in another post. If you are a video blogger and/or blogging on social media this is likely something you need to be giving some thought to and/or looking into.
Give it some thought, pay attention to this upcoming change, and in the meantime enjoy the Watch Later feature!
Here’s To Better Video Blogging!
PS: Let me know what you think in the comments below!