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:
YouTube uses an
<iframe> tag to deliver video. 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"> <iframe>
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"> <iframe>
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
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.