Jump to timecode in video - on button tap

Hi there,

Is there a way I can jump to a timecode in a video when the user taps a button?

Context: I have a video tutorial with the chapters listed under it. I want to jump to the timecode for a given chapter when the user taps the chapter name.

Many thanks!

Are you uploading the video to Glide storage or are you using a YouTube link?

Right now, YouTube or Vimeo.

I tried this, but it only works partially. It doesn’t “autoplay” after I click the chapter.

For youtube try to construct your link like this. The end of the link after t= will take you to a given timestamp.


Yeah that’s basically what I did in the video above, but it requires you clicking the video to play it again after clicking the chapter.

1 Like

Success if using URI. Provide your chapter URLs separated by commas.


function createYouTubePlayer(videoId, chapters, timestamps) {
  let html = `
<!DOCTYPE html>
  <meta charset="UTF-8">
  <title>YouTube Chapter Player</title>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #0A0A0A;
      font-family: Arial, sans-serif;
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
    .player-container {
      position: relative;
      width: 100%;
      padding-top: 56.25%; /* 16:9 aspect ratio */
      margin-bottom: 20px;
    #player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    .table-container {
      width: 100%;
      margin-bottom: 20px;
    table {
      width: 100%;
      border-collapse: collapse;
      color: white;
      table-layout: fixed;
    table th:nth-child(1),
    table td:nth-child(1) {
      width: 55px;
    td {
      padding: 10px;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid #333333;
    tr:hover {
      background-color: #ff7d29;
      color: #fff;
      cursor: pointer;
  <div class="player-container">
    <div id="player"></div>
  <div class="table-container">
        ${timestamps.map((time, index) => `
          <tr onclick="goToChapter(${time})">
            <td>${new Date(time * 1000).toISOString().substr(11, 8)}</td>
    // Load IFrame API asynchronously
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        videoId: '${videoId}',
        playerVars: {
          'controls': 1,
          'showinfo': 0
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange

    function onPlayerReady(event) {

    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.ENDED) {

    function goToChapter(time) {
      player.playVideo(); // Start playing from the selected chapter
  let uri = 'data:text/html;charset=utf-8,' + encodeURIComponent(html);
  return uri;

return createYouTubePlayer(p1, p2.split(',').map(chapter => chapter.trim()), p3.split(',').map(url => {
  const urlParams = new URLSearchParams(new URL(url).search);
  return parseInt(urlParams.get('t') || '0', 10);

Is there a way to use a youtube playlist?

By default, YouTube playlists already have a list which you can access in the top right corner. You can directly use the video component to play it. The format for the playlist is: https://www.youtube.com/embed/videoseries?list=YOUR_PLAYLIST_ID

1 Like

so in this case, your code isn’t necessary, only a video component?

Yes, unless you want a different look.

I like that it plays automatically when using your code but I couldn’t get the playlist to show up.

I need to try it to see if it would be the same if it was a playlist.
However, the playlist will also play continuously except for the initial start.

1 Like

What you need to know is that the code above is chopping a video based on time. Meanwhile, playlists only combine many videos in one list.

1 Like

it inspires me to start making videos :laughing:

1 Like

Maybe I can continue tomorrow.

1 Like

I’m not giving it here because it would confuse the topic of this thread. Please DM me.

ok :+1: