Youtube Timestamps in webflow

Example

  • ‍00:00:00 Dr. Cal Newport
  • ‍00:02:52 Sponsors: Helix Sleep, Maui Nui & Joovv
  • ‍00:07:00 Smartphones, Office & Walking
  • ‍00:13:08 Productive Meditation, Whiteboards
  • ‍00:20:04 Tool: Capturing Ideas, Notebooks
  • ‍00:24:57 Tool: Active Recall & Remembering Information
  • ‍00:30:02 Sponsor: AG1
  • ‍00:31:29 Studying, Deliberate Practice
  • ‍00:38:13 Flow States vs. Deep Work
  • ‍00:41:39 Social Media, Emergencies
  • ‍00:45:27 Phone & Addiction; Task Switching
  • ‍00:53:20 Sponsor: LMNT
  • ‍00:54:23 “Neuro-Semantic Coherence” vs. Flow; Concentration
  • ‍01:02:40 Internet Use & Kids; Video Games; Audiobooks
  • ‍01:08:15 Pseudo-Productivity, Burnout
  • ‍01:12:34 Social Media Distraction; The Deep Life
  • ‍01:18:03 Attention, ADHD, Smartphones & Addiction; Kids
  • ‍01:26:12 TikTok, Algorithm
  • ‍01:30:39 Tool: Boredom Tolerance, Gap Effects & “Thoreau Walks”
  • ‍01:37:43 Solitude Deprivation, Anxiety
  • ‍01:41:22 Tools: Fixed Work Schedule & Productivity, Exercise, Sleep
  • ‍01:47:52 Deep Work, Insomnia; Productivity & Core Work; Music
  • ‍01:55:08 Cognitive Focus & Environment; Isolation
  • ‍02:02:30 Burnout Epidemic, Digital Collaboration
  • ‍02:11:11 Cognitive Revolution, Balance
  • ‍02:16:45 Remote, Hybrid vs. In-Person Work; Zoom
  • ‍02:22:05 Tool: Pull-Based System, Designing Workload
  • ‍02:28:49 Tools: Multi-Scale Planning, Time Blocking; Deep Work Groups
  • ‍02:38:56 Tool: Shutdown Ritual
  • ‍02:42:37 Accessibility, Reputation & Flexibility
  • ‍02:47:29 Work-Life Balance, Vacation; Productivity
  • ‍02:54:47 Zero-Cost Support, Spotify & Apple Reviews, YouTube Feedback, Sponsors, Momentous, Social Media, Neural Network Newsletter

Documentation

We've used the collection list for the demonstration on the home page of this project, ideally you should use the CMS Collection page template.

1) Set up the CMS

First, we need 2 CMS fields.. A rich text field and a text field.

  • ‍Rich text field: This will be used to copy in our timestamps from the YouTube videos description. Each timestamp number (e.g 00:29:29) needs to be set as a link in the CMS but the link address does not matter where it points as the custom code we add later will change the link.
‍We add each timestamp as a bulletpoint for nice formatting.
  • ‍The Text Field: This will be used for the YouTube Video ID
Your field should look like this
This is how you find your video ID

2) Set up the Video Player

Add a div to the page with the id ‘iframe-wrapper’.

Inside this div, add a code embed with the code below:

<div style="position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */">
    <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube-nocookie.com/embed/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
</div>

‍

Make sure to add the Video ID Field to the Youtube URL like this:

3) Add Timestamps to the page

Go to the CMS Collection Page & Add a div with the id ‘timestamps-wrapper’

Add a rich text element into that div and connect with the CMS field we created earlier.

4) Add the Code

Add the Javascript code below into the before </body> tag field:

<script>
//Function to convert timestamps into Seconds
 
function timeStringToSeconds(timeString) {
  const timeComponents = timeString.split(':').map(Number);

  let totalSeconds = 0;
  
  if (timeComponents.length === 1) {
    totalSeconds = timeComponents[0] * 60;
  } else if (timeComponents.length === 2) {
    const [minutes, seconds] = timeComponents;
    totalSeconds = minutes * 60 + seconds;
  } else if (timeComponents.length === 3) {
    const [hours, minutes, seconds] = timeComponents;
    totalSeconds = hours * 3600 + minutes * 60 + seconds;
  }

  return totalSeconds;
}



const timestampsWrapper = document.querySelector('#timestamps-wrapper');

const iframeWrapper = document.querySelector('#iframe-wrapper').childNodes[0];

const innerDiv = iframeWrapper.childNodes[0];

const iframe = innerDiv.childNodes[1];

let iframeSRC = iframe.src;


let timestamp;

const linkElements = timestampsWrapper.querySelectorAll('a');


// To remove the default links from the timestamps

linkElements.forEach((item)=>{    
    item.href="#";
});


timestampsWrapper.addEventListener('click', (e)=>{


if(e.target.tagName === 'A'){
        
        const item = e.target;
        
        timestamp = timeStringToSeconds(item.textContent);
                
        let urlEnd = `?start=${timestamp}&autoplay=1&mute=1&cc_load_policy=1`;

        iframe.src = iframeSRC+urlEnd;
        
	// Add your video container ID below (Smooth Scroll Into View)
        document.getElementById("vid").scrollIntoView({behavior: 'smooth'});  
          
        } 
});
</script>

‍

Set your video container id to 'vid' to get that smooth scroll-into-view effect, each time we click on a timestamp.

5) Add the CMS content

First go to YouTube and find the video ID from the URL. Paste this into the Video ID field

This is how you find your video ID

Now, go to the video description and copy the timestamps for the video. This will generate the links we use to make your video jump to each chapter.

Note: the URL's YouTube generates do not matter as our code will adjust them, the important thing is that we have the correct chapter times as links.

Paste those timestamps into your CMS field and format as bullet points.

6) Publish your project

That's everything, now you can add videos to the CMS with interactive timestamps.

Tutorial