With Embedded YouTube Video, Create Link that Jumps to Specific Time

Question

On Wordpress, I'm trying to embed a YouTube video, then include links that jump to specific times in that video. So if I want to jump to 2:00, I can create a link that jumps to that point in the embedded video.

I found a similar question from a few years ago, but I believe the YouTube API has changed. I cannot find any plugins that can do this, so want to do it on my own if possible.

Suggestions?

Edit: Here is the code I've come up with so far. However, the only issue is that if the video hasn't been played yet, then seekTo seems to take a long time. I'm not sure if I should response to the onReady event, or another.

add_action( 'wp_enqueue_scripts', 'register_yt_frameapi' );

function register_yt_frameapi() {
    wp_register_script( 'frameapi', 'https://www.youtube.com/iframe_api', array(), '1.0.0', true );
}

add_shortcode('ytlink', 'ytlink');
function ytlink($atts, $content = null)
{
    wp_enqueue_script('frameapi');

    $id = $atts['id'];
    $time = $atts['time'];
    $timeParts = explode(':', $time);
    $seconds = 0;
    for ($i = 0; count($timeParts); $i++)
    {
        $seconds += array_pop($timeParts) * 60 * $i;
    }

    return '<a href="javascript:void(0);" ' .
    'onclick="var player = new YT.Player(\''.$id.'\', {events: {onReady: function () {player.seekTo('.$seconds.', true);}}});">'.
    ($content ?? $time) . '</a>';
}

I added a code sample of what I've tried. – devbanana Feb 06 '17 at 07:01 — devbanana, Feb 06 '17 at 07:01

score 8 · Accepted Answer · answered Feb 08 '17 at 22:21

Okay, I got this figured out finally. I'll post my solution here in case anyone else has the same question. I don't know if there may be a better way to do this, but this is the best I found.

Javascript:

var player;
var ytSeconds = 0;

jQuery(document).ready(function ()
    {
    player = new YT.Player('yt-embed', {events: {
      'onStateChange': onPlayerStateChange
      }
      });
    });

function onPlayerStateChange(e)
{
  if (e.data == 1 && ytSeconds > 0) {
    e.target.seekTo(ytSeconds);
    ytSeconds = 0;
  }
}

function seekTo(seconds)
{
  if (player.getPlayerState() == 1) {
    player.seekTo(seconds);
  }
  else {
    ytSeconds = seconds;
    player.playVideo();
  }
}

Then links just look like:

<a href="#" onclick="seekTo(120);">02:00</a>

Does this still work? I installed the code into my header but am not having success when I run `seekTo(120)` in the console. — BrettC, Dec 30 '20 at 02:25

score 0 · Answer 2 · answered Feb 06 '17 at 05:25

0

You can use the embed code like this. Use ?start=100&end=250

<iframe width="560" height="315" src="https://www.youtube.com/embed/N8VCzpXJZvM?start=100&end=250&autoplay=1" frameborder="0" allowfullscreen></iframe>

answered Feb 06 '17 at 05:25

Dev Kiran

589
7
17

Thanks. But that's not quite what I'm looking for. I want to start at the beginning of the video. But I want to link to specific topics throughout the video, and when the link is clicked, the video jumps to that point. – devbanana Feb 06 '17 at 05:34

score -1 · Answer 3 · answered Feb 06 '17 at 05:16

-1

There are good samples.

https://12starsmedia.com/blog/embed-youtube-video-specific-start-time http://www.youtubestartend.com/

You can use ?start= to define start points

answered Feb 06 '17 at 05:16

Ray

767
4
11

Same as above. I want to start at the beginning. But I want to link to specific topics throughout the video, like a table of contents almost. You'll see that in some video descriptions, where they link to the start of each topic, and then it jumps to that time. – devbanana Feb 06 '17 at 05:36
first link is dead – Zev Averbach Mar 12 '19 at 15:31

With Embedded YouTube Video, Create Link that Jumps to Specific Time

3 Answers3