Embeddable Widescreen YouTube Player

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.

Screenshot of YouTube Widescreen PlayerYou 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 »

Blogging

I apologize for my long absence from blogging.  Things have been quite busy recently, both personally and professionally, but there’s a much bigger reason I don’t blog more often.  This post notwithstanding, I can’t blog short.  What I mean to say in that grammatical horror I’m calling a sentence is that I don’t do well just posting a paragraph or two and moving on.  I tend to write long diatribes that I meticulously edit.  Consequently, I only write about three posts a month.

I’m not sure exactly why this is.  I guess my nature is to examine all sides of an issue, to, within reason, ensure that my argument is as well thought out as possible, to make sure that all of my ducks are in a row.  Considering the time that my other online extracurriculars take, this results in my rather infrequent blogging.  Maybe I’ll have to change that though.  I like writing, and I’d like to do it more often.  Of course, even as I’m trying to make this change, I’m going back and writing and re-writing these two paragraphs.  Ah well, such is the fate of the fastidious.

Time to Leave WordPress?

So, WordPress has had another major security problem. While I realize that no system is ever fully secure, it seems that WordPress has been having more than its fair share of issues. There was the “highly exploitable code” in May 2007. Then there was the December 2007 update to version 2.3.2, “an urgent security release that fixes a bug that can be used to expose your draft posts. 2.3.2 also suppresses some error messages that can give away information about your database table structure and limits and stops some information leaks in the XML-RPC and APP implementations. Get 2.3.2 now to protect your blog from these disclosures.” Then in February of 2008, there was the urgent update to version 2.3.3 to fix a bug that “would allow a user to edit posts of other users on that blog.” These, of course, were just the major issues. There were some other run-of-the-mill security updates along the way, the kind you expect with any online software.

I’m updating another WordPress blog that I run while writing this post. I had literally just written the following: “So far, I have been fortunate enough to avoid any real problems as a res,” when I found some spam files in my wp-content folder.

It’s disappointing that there are so many gaps in the pre-release security testing. On the one hand, it is free software, so perhaps I shouldn’t complain too much. On the other hand, it is free software owned by Automattic, which has parlayed the free labor it receives to help it build this software into a company worth $150-200 million, not to mention that there are a number of competitors with similar offerings.

To be honest, I probably won’t change any current blogs I’ve got on WordPress, but it makes me VERY hesitant to recommend it to any clients, and my next blog venture (whatever that may be), just might use MTOS.

Hat tip to David Russell for being the first one to mention the security issue to me. Unfortunately, his problems resulting from the latest WordPress bug are much more severe. On an only tangentially related note, it’s cool to go to a church where some of my pastors know more about web development and video editing than I do.  If you think that would be cool too, you should really check out NCC.

Red City WordPress Theme

After I installed the theme that I’m currently using, I realized that it doesn’t use widgets, so I’ve updated the theme to make it widget aware, as well as changed out the main photo for one that I think fits the theme better (no, it’s not the one of me, that’s just for my blog). I used a photo that I took in Times Square during my recent trip to NYC, so I also renamed the theme to Red City. The original theme is called Neo-Sapien. This theme is published under the GNU Public License.

Please let me know if you have any problems with the theme.  I’d like to try to fix anything I messed up on it.

Update: Just a quick update, this is a four column theme, but I’ve also put in an extra widgetized sidebar at the top of both right columns so that you can put something wider in there if you want (like a tag cloud).

Download Red City WordPress Theme
Red City WordPress Theme