Time stamps for videos issue

General
1

Hi!

We’ve used this hack to generate time stamps from a YouTube video on a Webflow page: Time stamps for videos on Webflow

There is an issue that is also present on the example page: if you click on a time stamp that is over 1h, like 01:01:42 here, it goes to 01:01 min.

Is there a way to correct this to go to 61:42 min perhaps?

Thanks a lot!

Sacha

2

Hey @info12!

Can you test this modified script?

<script>
// inject the youtube api script 
$('<script src="https://www.youtube.com/iframe_api">').insertBefore($('script')[0]);

// setup the onYouTubeIframeAPIReady function
// this is the function called by the youtube api once it's ready
function onYouTubeIframeAPIReady() {
  // loop through all the iframes on the page  
  $('iframe').each((i, frame) => { // for each iframe
    // get the src
    let src = $(frame).attr('src');
    // skip the iframe if it's not a youtube video
    if (!src.includes('youtube')) return;        
    // check if there's a pre-existing query string in the src
    // to determine how to embed the enablejsapi=1 param 
    let enablejsapi = src.includes('?') ? '&enablejsapi=1' : '?enablejsapi=1';
    // embed the enablejsapi=1 param
    src = `${src + enablejsapi}`;
    // set the new src as the iframe's src
    $(frame).attr('src', src);
    // create a unique id for the iframe
    $(frame).attr('id', 'dynamic' + i);
    // call the createPlayer function with the iframe's id
    createPlayer(frame.id);
  });
}

// setup the createPlayer function
function createPlayer(iframe) {
  // initialize YT.player with the specified iframe's id
  let player = new YT.Player(iframe, {
    // setup the event function to be called when YT.player is ready
    events: {
      onReady: onPlayerReady
    }
  });

  // setup the onPlayerReady function
  function onPlayerReady(event) {
    // when each timestamp is clicked
    $(`#${iframe}`).closest('.container').find('.hacks-rich-text a').click(function (e) {
      // stop default browser action
      e.preventDefault();
      // get the timestamp's text & split at the ':'
      // this will result in an array with hours (optional), minutes, and seconds
      let timestamp = $(this).text().trim().split(':');
      // declare & initialize seconds at 0
      let seconds = 0;

      // process hours, minutes, and seconds
      if (timestamp.length === 3) {
        // format: HH:MM:SS
        seconds += Number(timestamp[0]) * 3600; // hours to seconds
        seconds += Number(timestamp[1]) * 60;   // minutes to seconds
        seconds += Number(timestamp[2]);       // seconds
      } else if (timestamp.length === 2) {
        // format: MM:SS
        seconds += Number(timestamp[0]) * 60;   // minutes to seconds
        seconds += Number(timestamp[1]);       // seconds
      } else if (timestamp.length === 1) {
        // format: SS
        seconds += Number(timestamp[0]);       // seconds
      }

      // play the video at the specified seconds
      player.seekTo(seconds);
    });
  }
}
</script>
3

Hi Luis,

Thanks a lot!

Client removed the content, so I can’t let you know if it worked… :melting_face: I will revert if it’s the case, but I’m sure it’s good!

Sorry about that, and thanks again!

1 Like
4

You are welcome! Let me know if you need any more help!