Is there a better way to target a Vimeo IFRAME with timestamp LINKS?

I am not a pro programmer, so have mercy on me! I'd link to use HTML links to target timestamps in a Vimeo video iframe. I think many of my viewers could miss the built in "chapters" feature on the Vimeo player, so I'd like to make it foolproof for my visitors with a list of links to skip around the video. My solution below 'works', but it's clunky IMHO. With each click, it reloads the whole video in the iframe, starting at the time stamp. Please note that through experimentation I made up a name/value pair "ar-random" to change up the query and force a reload of the video. The number values are jibberish, just to force a reload. Without this random value, the same video would not load in the iframe. This fix is extremely hacky, but it works....kind of like fixing a leak with gaffers tape. I saw a Youtube solution to this same problem that was much more elegant. Using the Youtube API, it loaded a video (rather than a typical embed code.) In the javascript there was an array of the timestamps, and the HTML link clicks triggered the javascript, and loaded the appropriate times from the array instead of loading the whole video on each click. The behavior made it feel that the play head moved, and felt faster and snappier. I'm on Wordpress and the jQuery thing is over my head. I'd love to tackle this with on-page javascript if possible and no extra plugins. Any ideas on how to improve this? Thank you! <h4>VIMEO TIMESTAMP LINKS</h4> <div style="padding:56.25% 0 0 0;position:relative;"> <iframe name="vidframe" src="https://player.vimeo.com/video/605069004? badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="POOL VIDEO"> </iframe> </div> <script src="https://player.vimeo.com/api/player.js"></script> <strong>TIME STAMPS</strong> <ul> <li><a id="lesson-0" target="vidframe" href="https://player.vimeo.com/video/605069004?ar-random=3465562923656565&autoplay=1#t=0m0s&share=copy">0 min 0 sec</a></li> <li><a id="lesson-1" target="vidframe" href="https://player.vimeo.com/video/605069004?ar-random=7465562923656565&autoplay=1#t=0m30s&share=copy">0 min 30 sec</a></li> <li><a id="lesson-2" target="vidframe" href="https://player.vimeo.com/video/605069004?ar-random=2455629236565653&autoplay=1#t=1m2s&share=copy">1 min 2 sec</a></li> <li><a id="lesson-3" target="vidframe" href="https://player.vimeo.com/video/605069004?ar-random=4455629236565653&autoplay=1#t=2m3s&share=copy">2 min 3 sec</a></li> <li><a id="lesson-4" target="vidframe" href="https://player.vimeo.com/video/605069004?ar-random=9865562923665657&autoplay=1#t=2m47s&share=copy">2 min 47 sec</a></li> </ul> Thank you!

You can use Vimeo's SDK to do that. let iframe = document.querySelector('iframe'); // vimeo's iframe let player = new Vimeo.Player(iframe); player.setCurrentTime(time_in_seconds); Full Example: Preview on codepen <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h4>VIMEO TIMESTAMP LINKS</h4> <div style="padding: 56.25% 0 0 0; position: relative"> <iframe name="video_frame" src="https://player.vimeo.com/video/605069004?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%" title="POOL VIDEO" > </iframe> </div> <script src="https://player.vimeo.com/api/player.js"></script> <strong>TIME STAMPS</strong> <ul> <li> <button class="chapter_selector" id="lesson-0" data-timestamp="0:0">A Humble Beginning</button> </li> <li> <button class="chapter_selector" id="lesson-1" data-timestamp="0:15">Some cool stuff</button> </li> <li> <button class="chapter_selector" id="lesson-4" data-timestamp="2:57">Happy Ending</button> </li> </ul> <script src="https://player.vimeo.com/api/player.js"></script> <script> var vimeo_iframe = document.querySelector("iframe[name='video_frame']"); var vimeo_player = new Vimeo.Player(vimeo_iframe); document.querySelectorAll('.chapter_selector').forEach(found => { found.addEventListener("click", (element) => { let {timestamp} = found.dataset; let times_token = timestamp.split(':').map(x => Number(x)); // HH:MM:SS -> [HH, MM, SS] and converting them to number // convert Minutes to seconds add seconds let total_seconds = times_token[0] * 60 + times_token[1] // vimeo_player.pause() // if you want to stop the loading spinner vimeo_player.setCurrentTime(total_seconds) // vimeo_player.play() }) }) </script> </body> </html> More on

December 29, 2023