Custom YouTube URLs and valid embed code
A tutorial on customising YouTube URLs to change the behaviour of videos and to embed videos into websites with valid HTML5 or XHTML.
Sometimes you may want to perform a specific function with a YouTube video that isn’t the default. For instance, you may want to start the video at a certain time point or default to a specific resolution or quality.
Here are some tricks you can use to enable extra functionality by altering the video URL and/or embed code.
We’ll use my YouTube clip of the ABC1 Rage opener as an example. The URL is http://www.youtube.com/watch?v=ozQ4dE5ha38
1. Start a video at a particular time point
If I wanted to start my sample YouTube clip at the interview (and skip the opener), I need to start the sample video at 17 seconds. To do this, I need to add #t=XXmYYs (for XX mins and YY seconds) to the URL. Thus:
http://www.youtube.com/watch?v=ozQ4dE5ha38#t=00m17s
The embed code is a little different. In this instance, you will need to add &start=YY where YY is the number of seconds. If you want to start more than 60 seconds in, you will need to convert your time from minutes and seconds to just seconds.
<iframe width="640" height="360" src="http://www.youtube.com/embed/ozQ4dE5ha38?feature=player_detailpage&start=17" frameborder="0" allowfullscreen>
</iframe><(Note: This code and the following examples as YouTube create them aren’t valid HTML5 or XHTML. See below for a remedy for this).
2. Specify a video quality
You can’t specify the specific resolution with this hack, but you can specify whether a HD version (if available) of the video is shown or not.
Low definition: http://www.youtube.com/watch?v=ozQ4dE5ha38&hd=0
High definition: http://www.youtube.com/watch?v=ozQ4dE5ha38&hd=1
This technique doesn’t appear to work for embedded videos.
3. Stop embedded YouTube “suggested videos”
At the end of YouTube videos, the player will suggest other related videos that may be of interest. To prevent this from happening in embedded videos, simply add &rel=0 to the URL, as per this example:
<iframe width="640" height="360" src="http://www.youtube.com/embed/ozQ4dE5ha38?feature=player_detailpage&rel=0" frameborder="0" allowfullscreen>
</iframe>This does not work for non-embedded videos.
4. Embedded YouTube video autoplay
To get YouTube videos to autoplay add &autoplay=1 to the URL of the embedding code, as per this example:
<iframe width="640" height="360" src="http://www.youtube.com/embed/ozQ4dE5ha38?feature=player_detailpage&autoplay=1" frameborder="0" allowfullscreen>
</iframe>Non-embedded videos autoplay by default.
5. Valid YouTube embed code
Unfortunately the embed code that YouTube provides is not valid XHTML or HTML5. There is no attribute called “allowfullscreen” whilst “width” and “height” are not valid iframe attributes in HTML5.
The simplest tool for remedying this situation is the awesome YouTube Embed Code Generator. This facility will produce valid XHTML and HTML5, albeit with inline CSS styling as per the following example:
<object type="application/x-shockwave-flash" style="width:640px; height:360px;" data="http://www.youtube.com/v/ozQ4dE5ha38?version=3">
<param name="movie" value="http://www.youtube.com/v/ozQ4dE5ha38?version=3" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object>
As one would expect from a free service, the site adds some link code at the end, but this part can easily be removed:
<div style="font-size: 0.8em"><a href="http://www.tools4noobs.com/online_tools/youtube_xhtml/">Get your own valid XHTML YouTube embed code</a></div>
If you wish to create valid iframe code, then that will require some manual changes.
Here’s an example of the invalid iframe code:
<iframe width="640" height="360" src="http://www.youtube.com/embed/ozQ4dE5ha38?feature=player_detailpage&rel=0" frameborder="0" allowfullscreen></iframe>Here’s how I have made it valid:
<iframe style="width:640px; height:360px; border-style: none;" src="http://www.youtube.com/embed/ozQ4dE5ha38?feature=player_detailpage&rel=0"></iframe>To do this: I completed the following two key steps:
- Removed “width”, “height” and “frameborder” attributes and replaced them with inline-CSS
- Replaced the URL ampersand (&) with & in all instances
If you want to use the custom URL tricks on this page in a valid iframe, it is critical that the above two steps are adhered-to.
Of course, various customisations can be piggybacked, as shown in the following example:
<iframe style="width:640px; height:360px; border-style: none;" src="http://www.youtube.com/embed/ozQ4dE5ha38?feature=player_detailpage&rel=0&start=17">
</iframe>With these hacks, you can link-to or embed YouTube videos that will behave as you wish them to.
Comments
One response to “Custom YouTube URLs and valid embed code”
Thanks, this was helpful. By the way, the code created by YouTube Embed Code Generator didn’t work, but your codes were fine.