YouTube provides code to embed video from its service into a web page. Hosting videos on YouTube is often a good idea: the service supports high-quality H.264 video, potentially exposes your video to a wide audience, can use both Flash and HTML5 for playback, and offloads demands on your server for hosting and storing the video.
YouTube offers several options to include in your embedded video. With all options turned off, the code that YouTube supplies for embedding looks something like this:
- <object width="640" height="385">
- <param name="movie" value="http://www.youtube.com/v/GOawKqRvr8s?fs=1&
- <param name="allowFullScreen" value="true"></param>
- <param name="allowscriptaccess" value="always"></param>
- <embed src="http://www.youtube.com/v/GOawKqRvr8s?fs=1&hl=en_US
- &rel=0" type="application/x-shockwave-flash" allowscriptaccess="always"
- allowfullscreen="true" width="640" height="385">
You can see the
<embed> tag stuck in there, which will make this code invalid under XHTML. It also places the
width of the video as attribute values – they should be CSS, just as they would be for images.
There are a few online tools that will clean up this code, although it is not hard to do the job by hand.
Embedding YouTube In XHTML
- <object type="application/x-shockwave-flash"
- style=”width: 640px; height: 385px;” >
- <param name="movie"
- value="http://www.youtube.com/v/GOawKqRvr8s?rel=0" />
Embedding YouTube In HTML5
Under HTML5 the code is somewhat simpler: YouTube uses an
<iframe> tag to deliver video to the browser. This also has the advantage of allowing the device to choose what kind of video to play: mobile devices, for example, can use pure HTML5 video, while older browsers can still use Flash. The code looks something like this:
- <iframe class="youtube-player" type="text/html"
- style=”width: 640px; height: 385px;”
- src="http://www.youtube.com/embed/GOawKqRvr8s" frameborder="0">
You can see the result at the top of this article.
YouTube Tricks & Tips
It is possible to start a YouTube video at a particular point, a variation on a technique known as “deep linking”. Doing so requires extending the URL used to reference the video:
- <iframe class="youtube-player" type="text/html" style=”width: 640px; height: 385px;”
- src="http://www.youtube.com/embed/GOawKqRvr8s&start=80" frameborder="0">
start is measured in seconds, i.e. a
start value of
80 represents a jump of 1 minute 20 seconds into the video.
Note the use of the HTML entity
& between variables in the URL: you’ll often see this represented simply as
& in URLs which will cause the page to be invalid. As you should know, the
& character always signifies that a HTML entity code is about to follow; if you want the actual ampersand character, you must use
Somewhat confusingly, this trick is changed if you are simply linking to a YouTube video, rather than embedding it:
In this case, the
t variable value jumps to 40 seconds into the video.
Vimeo should also be mentioned as an alternative to YouTube: it tends to focus on more artistic, creative, higher quality, longer format works. Finally, both Vimeo and YouTube support HTML5"" you can see it natively on Vimeo if you’re using Safari or Chrome (use the “view in HTML5” link below any Vimeo video), and on YouTube at http://www.youtube.com/html5