UPDATE: YouTube has now officially released their new widescreen player, and the method I describe in the original post is obsolete, albeit still functional.
However, the embed code that YouTube provides doesn’t actually account for the fact that your video is widescreen. In other words, unless you change the height of the player that you embed in your website/blog, you will still get the black bars at the top and bottom of your video.
To fix this, you will need to change the height of your video in both the embed and object tags. While the dimensions of your video may vary, I’ve found that a 260 pixel height is the magic number for a standard widescreen video.
You can also embed higher quality videos by adding either “&fmt=18″ (for good quality) or “&fmt=22″ (for HD quality) to the end of the URL.
For example:
<object width="425" height="290"><param name="movie" value="http://www.youtube.com/v/P3PDLsJQcGI&hl=en&fs=1&fmt=22"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/P3PDLsJQcGI&hl=en&fs=1&fmt=22" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="290"></embed></object>
Of course, when you embed the higher quality videos, you can make the player you embed larger without artifacting. Be warned, however, that the HD quality videos don’t necessarily download very quickly. Your viewers may get frustrated while waiting for YouTube to buffer the video.
—
You may have noticed a link reading “Try the New YouTube Player Beta!” under videos on YouTube. The new player is pretty sharp looking. Moreover, it has a sweet widescreen version. Unfortunately, YouTube provides no instructions on embedding the new player on your blog/website. I searched Google and didn’t find any instructions anywhere, so after I figured it out, I thought I should share with the world.
To embed a regular 4:3 video, use the following code.
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/swf/watch.swf?video_id=YOUR-VIDEO-ID-HERE"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/swf/watch.swf?video_id=YOUR-VIDEO-ID-HERE" type="application/x-shockwave-flash" wmode="transparent" width="480" height="385"></embed></object>
There is one caveat when using the new player: the videos start automatically whether you want them to or not. I’m sure this is something YouTube will deal with once the player comes out of beta, but for now, we’re stuck with it how it is. At least, I think so. I couldn’t find any way to stop it, although I didn’t try using the API. If you know how to stop it from auto-playing, let me know in the comments.
To embed a widescreen video you must add &vq=2&fmt_map=6/720000/7/0/0 to the end of the URL (shown in the following code box). However, there is an additional caveat when using the widescreen player. Most videos, even widescreen videos, will not work with it. If you get a message saying, “This video is no longer available,” and you’re sure you copied the code correctly, it means that the video will not work with the widescreen player. If you’re having trouble, you can test your code with the video id X13o3efXTmk , which is the video I have embedded below. If it still doesn’t work, your code may be slightly off. Unfortunately, it’s very finicky and breaks at the drop of a hat.
I can’t promise this is repeatable, but I did upload one video that worked with the widescreen player. It had a 1.8:1 ratio (864×480) letterboxed into a 640×480 Quicktime video. I’m sure other ratios/sizes would work as well. The video below has an even wider radio, but 1.8:1 and 640×480 worked for me.
<object width="480" height="295"><param name="movie" value="http://www.youtube.com/swf/watch.swf?video_id=YOUR-VIDEO-ID-HERE&vq=2&fmt_map=6/720000/7/0/0"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/swf/watch.swf?video_id=YOUR-VIDEO-ID-HERE&vq=2&fmt_map=6/720000/7/0/0" type="application/x-shockwave-flash" wmode="transparent" width="480" height="295"></embed></object>
Read the rest of this entry »
