Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 2 down vote favorite
1

Does anyone know about a technique to make links on a website function as deep links to an embedded vimeo/youtube video on that same page?

That way one could include video's in a blog post or similar, and reference certain portions of the video through deep linked time codes. I suspect one would need some javascript magic to do this.

On another note, I wish I had the "tagging might" to be able to introduce the tags deep-linking and vimeo.

share|improve this question

2 Answers

up vote 1 down vote accepted

You can embed deep-linked YouTube videos by using the 'start' attribute to make playback start at a specific time, like this:

<iframe id="video" width="560" height="349" src="http://www.youtube.com/embed/3CR5y8qZf0Y?start=20" frameborder="0" allowfullscreen></iframe>

You could modify the start time using JavaScript and jQuery, like this:

jQuery

function setTheTime(theTime) {
    var videoURL = $('iframe#video').attr('src');
    videoURL = videoURL.replace(/=.+/, "="+theTime+"&autoplay=1");
    $('iframe#video').attr('src',videoURL);
}

$('.time').click(function() {
    var newTime = $(this).attr('href').replace('#','');
    setTheTime(newTime);
});

HTML

<p>Watch this video from <a href="#20" class="time">20 seconds</a> or from <a href="#40" class="time">40 seconds.</a></p><br/><br/>

<iframe id="video" width="560" height="349" src="http://www.youtube.com/embed/3CR5y8qZf0Y?start=0" frameborder="0" allowfullscreen>    </iframe>

Demo
Here's a working demo of the result. (Click the '20 seconds' and '40 seconds' links in the 'Result' frame on the bottom right to see it working.)

Notes
Note that I modified the default YouTube embed code to add ?start=0 to the src and the id="video" attribute so we can target that iframe with jQuery.

Once you've done that, all links on the page using the <a href="#20" class="time">link text here</a> format will modify the start time and autoplay the video.

Not sure if this is possible with Vimeo, as I'm not as familiar with their embed code.

share|improve this answer
Excellent! I'm a JS newbie, but let's see if I get it: First you make a function, that grabs the url of the youtube video. Through some regex it adds the "time" from the function call and trows on an autoplay. Last line in the function, replaces the iframe's url. Seems interesting to me that the Youtube video responds so well to having it's src replaced. Thank you for taking the time to answer this. – thunki May 3 '11 at 11:14
Btw, you used var newTime = $(this).attr('href').replace('#',''); Why did you use .replace, and made href be #20 instead of just 20? – thunki May 3 '11 at 11:20
You've got it! The $('.time').click() part finds all HTML tags with a class of 'time', and attaches a click behaviour which says 'strip the # from the href and pass that number to setTheTime(). The setTheTime() function then grabs the existing YouTube URL from the iframe that holds our video, replaces the 'time=0' with the number in the href of the link we clicked, and turns autoplay on. Then it updates the iframe's src, which forces the iframe to reload by requesting the video again from YouTube with the new time info. JavaScript is pretty handy. – Nick May 3 '11 at 11:32
The href="#20" instead of the href="20" is in case the visitor has JavaScript turned off. If someone without JavaScript visits yoursite.com/index.html and clicks a link like this <a href="30">my link</a>, the browser will try to send them to yoursite.com/30/ But if they click a link like this <a href=#30">my link</a>, the resulting url will be yoursite.com/index.html#30, which won't redirect them. It's still not ideal, but it's a worthwhile addition to prevent people with JS turned off (and search robots) from following the links to error pages. – Nick May 3 '11 at 11:43
up vote 0 down vote

For YouTube, this is how you link using timecodes to get to the bit you want: http://www.google.com/support/youtube/bin/answer.py?answer=116618

For Vimeo this FAQ describes how to do it, but only if it's your video: http://vimeo.com/help/faq#chapters

share|improve this answer
Thanks for the answer, but I was wondering how to make use of time codes on a personal webpage. However I got an answer now. :) – thunki May 3 '11 at 11:21
It would be good if you answered your question here in case other people have the same problem. – paulmorriss May 3 '11 at 13:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.