The Ultimate Youtube Hacking Compendium

I often find myself needing to use a certain youtube hack or switch that I'm sure I've used before, but can't remember how. This article is meant as a resource for me as well as anybody else who might find it useful.

google youtube logo The number one feature I keep forgetting is how to link to a specific time in a youtube video. That’s simple: you have to append #t=00m00s where you replace 00 with the actual minutes and seconds. For instance, to link to one of the latest Google Webmaster Help videos while skipping the intro, you create the link using http://www.youtube.com/watch?v=UbimY0exQIA#t=00m29s. The effect is that the linked video starts 29 seconds into the recording.

This is probably the only parameter you need for linking. When embedding however, you might want a finer control of how the video is displayed on your website. Luckily, google code lists all parameters that can modify the embedding code of their player.

youtube embed code parameters

Straight from the google code reference site (g-embed):

All of the following parameters are optional. They are officially supported only by the embedded player, but a subset of them may work with other players such as the playlist player or the custom player.

rel

Values: 0 or 1. Default is 1. Sets whether the player should load related videos once playback of the initial video starts. Related videos are displayed in the "genie menu" when the menu button is pressed. The player search functionality will be disabled if rel is set to 0.

autoplay

Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.

loop

Values: 0 or 1. Default is 0. In the case of a single video player, a setting of 1 will cause the player to play the initial video again and again. In the case of a playlist player (or custom player), the player will play the entire playlist and then start again at the first video.

enablejsapi

Values: 0 or 1. Default is 0. Setting this to 1 will enable the Javascript API. For more information on the Javascript API and how to use it, see the JavaScript API documentation.

playerapiid

Value can be any alphanumeric string. This setting is used in conjunction with the JavaScript API. See the JavaScript API documentation for details.

disablekb

Values: 0 or 1. Default is 0. Setting to 1 will disable the player keyboard controls. Keyboard controls are as follows:
     Spacebar: Play / Pause
     Arrow Left: Jump back 10% in the current video
     Arrow Right: Jump ahead 10% in the current video
     Arrow Up: Volume up
     Arrow Down: Volume Down

egm

Values: 0 or 1. Default is 0. Setting to 1 enables the "Enhanced Genie Menu". This behavior causes the genie menu (if present) to appear when the user's mouse enters the video display area, as opposed to only appearing when the menu button is pressed.

border

Values: 0 or 1. Default is 0. Setting to 1 enables a border around the entire video player. The border's primary color can be set via the color1 parameter, and a secondary color can be set by the color2 parameter.

color1, color2

Values: Any RGB value in hexadecimal format. color1 is the primary border color, and color2 is the video control bar background color and secondary border color.

start

Values: A positive integer. This parameter causes the player to begin playing the video at the given number of seconds from the start of the video. Note that similar to the seekTo function, the player will look for the closest keyframe to the time you specify. This means sometimes the play head may seek to just before the requested time, usually no more than ~2 seconds.

fs

Values: 0 or 1. Default is 0. Setting to 1 enables the fullscreen button. This has no effect on the Chromeless Player. Note that you must include some extra arguments to your embed code for this to work. The bolded parts of the below example enable fullscreen functionality:

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

hd

Values: 0 or 1. Default is 0. Setting to 1 enables HD playback by default. This has no effect on the Chromeless Player. This also has no effect if an HD version of the video is not available. If you enable this option, keep in mind that users with a slower connection may have an sub-optimal experience unless they turn off HD. You should ensure your player is large enough to display the video in its native resolution.

showsearch

Values: 0 or 1. Default is 1. Setting to 0 disables the search box from displaying when the video is minimized. Note that if the rel parameter is set to 0 then the search box will also be disabled, regardless of the value of showsearch.

showinfo

Values: 0 or 1. Default is 1. Setting to 0 causes the player to not display information like the video title and rating before the video starts playing.

iv_load_policy

Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotation to not be shown by default.

cc_load_policy

Values: 1. Default is based on user preference. Setting to 1 will cause closed captions to be shown by default, even if the user has turned captions off.

Some older parameters I used before but seem to have been dropped include &ap=%2526fmt%3D18 (to force embedding of the 480p) &ap=%2526fmt%3D22 (to force embedding of the 720p HD version) as well as &fmt=18 or &fmt=6 or even 720p &fmt=22.

xhtml valid code

According to Varesano.net, the code produced by youtube’s website is not XHTML compliant. He offers the following as an example of fully compliant code:

<!--[if !IE]> <-->
<object type="application/x-shockwave-flash" width="425" height="350"
data="http://www.youtube.com/v/Yc_J_kXaFSw&rel=0">
<!--> <![endif]-->
<!--[if IE]>
<object type="application/x-shockwave-flash" width="425" height="350"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<![endif]-->
<param name="movie" value="http://www.youtube.com/v/Yc_J_kXaFSw&rel=0" />
<p>Your browser is not able to display this multimedia content.</p>
</object>

saving youtube videos to your computer

The easiest way to save flash videos on your computer is to use an extension for Firefox, VideoDownloader or Download Helper (link below). You can then play them using VLC or transcode (convert) them to avi, mpg or mp3 using ffmpeg. If you need more help than this, mashable has an exhaustive howto, linked below.

A number of websites also make the downloading easier: Downloader9, KeepVid, Vixy, Easy YouTube Video Downloader, iDesktop.tv, VideoDownloadX, SaveTube, VideoGetting.

If you don’t like the above options, you might consider searching your browser cache for .flv files (i.e., flash video). You can also use the free and excellent Orbit downloader.

embedding flash video

The easiest way to share videos is to upload them to YouTube or vimeo (or other, similar sites). They do not own their video, but you license it to them for the purpose of distribution until you delete it (otherwise, they couldn’t let other people see it). If, for any reason, you want to distribute your flash video from your own site yourself, you can use either the very popular JW player or the lesser known flowplayer.

For serious hacking, beyond the scope of this article, you might want to have a look at Google’s JavaScript API reference (g-js-api)

Sources / More info: g-embed, varesano-youtube, drupal-video, g-js-api, ff-video-downloader, vlc-portable, ffmpeg, mashable-how2, yt-hack-yt