: How can I make links on my own page that work like deep links interacting with an embedded youtube/vimeo on that same page? Does anyone know about a technique to make links on a website function

@Heady270

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.

Vote Up Vote Down

@Sue5673885

For YouTube, this is how you link using timecodes to get to the bit you want: 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: vimeo.com/help/faq#chapters

Vote Up Vote Down