Sunday, 24 November 2013

Sunday, November 24, 2013
How to embed YouTube videos with a start and end timeNow we all have watched YouTube videos and shared them with others either in social networking sites or by simply sending them the link to the video. But when it comes to embedding YouTube videos in blogs or websites people stumble quite a bit, especially when the YouTube video is a lengthy one and you desire to show on part of it.

Well, there’s a way to do exactly that and it’s quite an easy fix.

Let’s take a video for example something that’s a bit lengthy so that we can apply both start and end timers. You can go to YouTube and choose any video that you like.

For my example I am taking :

The picture below shows how I got the code to embed the video. 

This is the initial code that I got from the Embed section of the video: 

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

Now, lets see what we can do to modify it. 

In order to make the video start and end at the specific time that we want we have to add start and end parameter next to ?rel=0 that is &start=xxxx&end=yyyy. So the final embed code should look like this.

<iframe width=”560″ height=”315″ src=”// www.youtube.com/embed/uuZE_IRwLNI?rel=0& start=xxxx&end=yyyy ” frameborder=”0″ allowfullscreen></iframe>

Now I had checked the option to show related videos at the end in that case you wont see ?rel=0 at the end of the URL. In that case you have to just add ?start=xxxx&end=yyyy at the end of the URL before quotation mark. It will look like this.

<iframe width=”560″ height=”315″ src=”// www.youtube.com/embed/uuZE_IRwLNI?start=xxxx&end=yyyy ” frameborder=”0″ allowfullscreen></iframe>


In the above code you can see xxxx and yyyy in which the video will start from x seconds and ends at y seconds. 

So lets say that I want to start the video from 06:00 (mm:ss) then simply specify the start time as start=360 (6*60+00 = 360) and do the same for the end parameter. In my code I didn't add any end parameter: 

Final modified code : 
<iframe width="560" height="315" src="//www.youtube.com/embed/uuZE_IRwLNI?start=360" frameborder="0" allowfullscreen></iframe>

So the Final output is : 


I hope you liked the the simple method that is used. If you have something that I missed do comment. 

0 comments:

Post a Comment