demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Web Multimedia: Embedding YouTube Video

html / multimedia

Estimated reading time: 2 minutes, 18 seconds

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&amp;hl=en_US&amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="//.youtube.com/v/GOawKqRvr8s?fs=1&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385">
</embed>
</object>

You can see the <embed> tag stuck in there, which will make this code invalid under XHTML. It also places the height and 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" data="http://www.youtube.com/v/GOawKqRvr8s?rel=0" style="width: 640px; height: 385px;">
<param name="movie" value="http://www.youtube.com/v/GOawKqRvr8s?rel=0" />
</object>

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">
<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&amp;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 &amp; 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 &amp;

Somewhat confusingly, this trick is changed if you are simply linking to a YouTube video, rather than embedding it:

http://www.youtube.com/watch?v=0MP_G6arpVI#t=0m40s

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

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.