# Jump to timecode in video - on button tap

**URL:** https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718
**Category:** Ask for Help
**Created:** [July 8, 2024, 9:41pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718 "2024-07-08T21:41:01Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![mitsley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mitsley/32/60406_2.png) [@mitsley](https://community.glideapps.com/u/mitsley)
#### Post date: [July 8, 2024, 9:41pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/1 "2024-07-08T21:41:01Z")

</div>

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!

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [July 8, 2024, 11:46pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/2 "2024-07-08T23:46:20Z")

</div>

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

---

<div class="post-metadata">

### Author: ![mitsley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mitsley/32/60406_2.png) [@mitsley](https://community.glideapps.com/u/mitsley)
#### Post date: [July 9, 2024, 5:51am UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/3 "2024-07-09T05:51:00Z")

</div>

Right now, YouTube or Vimeo.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [July 10, 2024, 2:39pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/4 "2024-07-10T14:39:58Z")

</div>

> **[Thinh's Demo - Videos](https://docs.lowcode.agency/recordings/cn5ACH83POJLSFggeOvt)**
>
> Summary:
> The speaker discusses issues with the current video setup, particularly related to autoplay functionality and chapter navigation. They express a desire to improve the system for a better user experience.
> 
> Chapters:
> 00:05 Issues with Autoplay...

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

---

<div class="post-metadata">

### Author: ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)
#### Post date: [July 12, 2024, 5:31pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/5 "2024-07-12T17:31:44Z")

</div>

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

`https://youtu.be/vd7SNnVhQP4&t=1m45s`

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [July 13, 2024, 12:07am UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/6 "2024-07-13T00:07:54Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 13, 2024, 3:30am UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/8 "2024-07-13T03:30:38Z")

</div>

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

 ![Screenshot 2024-07-13 at 13.32.33](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/5/c5aa8fe3ba2a632b93d130bf42eb20b8f9e367db.png)  
 ![Screenshot 2024-07-13 at 13.34.23](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/2/12159280b7b8fbf76eae020bc5f6ea4521aec419.png)

![ScreenRecording2024-07-13at13.41.21-ezgif.com-video-to-webp-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/4/642b4d805cfd229f65c92a38c4aa793c76ff0890.webp)

```auto
function createYouTubePlayer(videoId, chapters, timestamps) {
  let html = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>YouTube Chapter Player</title>
  <style>
    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;
    }
  </style>
</head>
<body>
  <div class="player-container">
    <div id="player"></div>
  </div>
  <div class="table-container">
    <table>
      <tbody>
        ${timestamps.map((time, index) => `
          <tr onclick="goToChapter(${time})">
            <td>${new Date(time * 1000).toISOString().substr(11, 8)}</td>
            <td>${chapters[index]}</td>
          </tr>
        `).join('')}
      </tbody>
    </table>
  </div>
  <script>
    // 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) {
      event.target.playVideo();
    }

    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.ENDED) {
        player.seekTo(${timestamps[0]});
      }
    }

    function goToChapter(time) {
      player.seekTo(time);
      player.playVideo(); // Start playing from the selected chapter
    }    
  </script>
</body>
</html>
  `;
  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);
}));

```

---

<div class="post-metadata">

### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [July 14, 2024, 6:13pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/9 "2024-07-14T18:13:40Z")

</div>

Is there a way to use a youtube playlist?

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 14, 2024, 6:18pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/10 "2024-07-14T18:18:57Z")

</div>

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`

---

<div class="post-metadata">

### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [July 14, 2024, 6:23pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/11 "2024-07-14T18:23:02Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 14, 2024, 6:24pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/12 "2024-07-14T18:24:41Z")

</div>

Yes, unless you want a different look.

---

<div class="post-metadata">

### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [July 14, 2024, 6:27pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/13 "2024-07-14T18:27:36Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 14, 2024, 6:30pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/14 "2024-07-14T18:30:41Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 14, 2024, 6:35pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/15 "2024-07-14T18:35:10Z")

</div>

> [@Sekayi\_Liburd](#):
>
> I couldn’t get the playlist to show up.

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.

---

<div class="post-metadata">

### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [July 14, 2024, 6:52pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/16 "2024-07-14T18:52:31Z")

</div>

it inspires me to start making videos 😆

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 14, 2024, 6:55pm UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/17 "2024-07-14T18:55:43Z")

</div>

Maybe I can continue tomorrow.

---

<div class="post-metadata">

### Author: ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 15, 2024, 2:21am UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/18 "2024-07-15T02:21:35Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Sekayi\_Liburd](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sekayi_liburd/32/77608_2.png) [@Sekayi\_Liburd](https://community.glideapps.com/u/Sekayi_Liburd)
#### Post date: [July 15, 2024, 2:23am UTC](https://community.glideapps.com/t/jump-to-timecode-in-video-on-button-tap/74718/19 "2024-07-15T02:23:11Z")

</div>

ok 👍