August 2, 2013

Partial YouTube Embeds

Let's say you want to embed a long YouTube video, but you only need a short excerpt from that video. The Nexus 7 & Chromecast Press Event video has 64 minutes, but you only want to embed the part about Android stats from 02:50 to 06:28.

Start with the standard embedding code:

<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/GbXeZ16FoCY" width="560"></iframe>

Then add the start and end parameters. Both use seconds, so you'll need to convert minutes to seconds. For my example:

* 02:50 = 2 minutes and 50 seconds = 2*60+50 seconds = 170 seconds, so start=170
* 06:28 = 6 minutes and 30 seconds = 6*60+28 seconds = 388 seconds, so end=388.

Here's the final code. You only need to add the underlined text in red:

<iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/GbXeZ16FoCY?start=170&end=388" width="560"></iframe>

Here's the video embed:


When you click the play button, YouTube will only play the excerpt you've selected. This works for both the Flash player and the HTML5 player. Visitors can always use the seek bar and skip to other part of the video or continue to watch the video.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.