Embedding Youtube Videos – Tips and Passing xHTML Validation

Posted in SEO , Web Development on 4 December 2009 6 comments

If you use the default code given by youtube to embed a video, you will notice that it failed to pass xHTML validation. This is because <embed> was deprecated in favor of the <object></object> element.

Embed Youtube Video and Pass xHTML Validation at the same time

This is the codes given by youtube:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/VEL5ABddZ0k&hl=en_US&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/VEL5ABddZ0k&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

After some changes, it is now xHTML validated codes:

<object type="application/x-shockwave-flash" width="425" height="344" data="http://www.youtube.com/v/VEL5ABddZ0k&amp;hl=en_US&amp;fs=1">
<param name="movie" value="http://www.youtube.com/v/VEL5ABddZ0k&amp;hl=en_US&amp;fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>

What has changed:

  • <embed> tag has been removed
  • Added type=”application/x-shockwave-flash” to <object> tag
  • Added data=”" attribute to <object> tag
  • All & in the URL has been changed to &amp;
  • <param> tag is now self-closed

 

Tips and Tricks When Embedding Youtube Video

There are some built-in parameters that you can add to change the behaviour/style of embedded video.

Disable Related Videos
I don’t like to see related videos when I mouseover the video container. You can add &amp;rel=0 to the two video urls in the code. Based on the xHTML validated codes above, now it would look like:

<object type="application/x-shockwave-flash" width="425" height="344" data="http://www.youtube.com/v/VEL5ABddZ0k&amp;hl=en_US&amp;fs=1&amp;rel=0">
<param name="movie" value="http://www.youtube.com/v/VEL5ABddZ0k&amp;hl=en_US&amp;fs=1&amp;rel=0" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>

Disable Search
To disable the search box from displaying when the video is minimized, add &amp;showsearch=0 to the two URLs

Auto Play
By default, auto play is off. To enable it, add &amp;autoplay=1 to the two URLs

Custom Start Time
You can change the start time of the video, thus embeding only part of a video.
For example, if you want the video to start from 30th second, add &amp;start=30 to the two URLs

More
There are more options you can change, such as:

  • Loop (replay video)
  • Border/colour
  • Enable HD playback
  • Disable the keyboard controls

For the full list and info, please refer to this page.

 

Posted by Zen on 4 December 2009 • 9,919 visits 6 comments
Tags :


or Subscribe to specific category only :




  - 6 Comments


web says:

very helpful post

javier says:

thanks this help out a lot

Katie says:

Thank you for taking the time to post this information it sorted the problem out for me no problems now :-)

ipad fan says:

Thanks for posting this i have been looking all over the net for a solution, perfect thanks

Teddy says:

i really need this,,thanks for the youtube tutorial

matty says:

thanks. info is much appreciated

Leave a Reply

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.

Previous Post
«
Next Post
»