I build web applications and motorcycles.

How To Embed Widescreen YouTube Video

Posted: November 25th, 2008 | Author: | Filed under: How-To, Technology | Tags: , , , , | 8 Comments »


UPDATE: YouTube now allows you to select dimensions when customizing embed code. Simply click the Customize icon next to the embed code, and select the size you want- the embed code will be updated to match!

YouTube recently announced a change that modifies their video player to a widescreen format. Unfortunately, the default code provided for embedding videos still defaults to a 4:3 size (450×355). It’s easy to modify the dimensions to match the player on YouTube.

In the embed code provided, change the the width parameters to 640, and height parameters to 385.

<object width="640" height="385">
 <param name="movie" value="http://www.youtube.com/v/rs-jAImScms&hl=en&fs=1&rel=0"></param>
 <param name="allowFullScreen" value="true"></param>
 <param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/v/rs-jAImScms&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed>
</object>

Make sure to change the dimensions in both places. Hopefully YouTube will update the options for customizing their embed code to do this automatically. For now, it’s easy enough to edit by hand.

Note: For those that wish to keep the original width of the YouTube player with a widescreen format, use a width of 450 and a height of 271. This might be useful for sites that were designed around the original player width.

8 Comments on “How To Embed Widescreen YouTube Video”

  1. 1 Joe said at 12:30 pm on November 25th, 2008:

    Thanks.

    Do you hapen to know what % of the vertical space the inVideo ads take? It was 20% before this change.

  2. 2 Youtube goes widescreen! | slayer's blog said at 12:30 pm on November 25th, 2008:

    [...] McOrmond  has a guide on how to embed the new widescreen videos Enjoyed this post? Subscribe to my RSS feed today! [...]

  3. 3 A Hassan said at 6:19 pm on November 25th, 2008:

    i think Firefox has this information in the page info as well. I remember getting the object details from there.

  4. 4 JR Morton said at 12:42 pm on November 26th, 2008:

    The website is a link to my video, but i determined that being 271 px was too short, but 640 px was too big for my forum, so I came to using 569×344. This works well for me.

  5. 5 J said at 7:10 pm on November 26th, 2008:

    but do you know how to modify the YouTube video links so that when you embed them they won’t show related videos at the end? that’s my problem. I think Youtube could work on their features a little bit more.

  6. 6 Daniel McOrmond said at 1:27 am on November 27th, 2008:

    @J

    Click on the customize icon (it looks like a little gear) and choose “Don’t include related videos” before copying the text in the Embed field.

  7. 7 YouTube goes widescreen…as do I (pretty much) said at 5:06 pm on November 28th, 2008:

    [...] Anyway, I did manage to work out how to embed widescreen clips on blogs, etc…thanks Daniel McOrmand! [...]

  8. 8 Riki said at 3:00 am on December 23rd, 2008:

    Sorry, but i cant seem to find where to change the parameters? I tried to clik in the embed window, but it seems to be locked? or am I clicking at the wrong place? please help, where is this embed code which is provided? is it only in the moment of uploading, or can it be changed afterwards? thanx

Leave a Reply