Control time of embedded YouTube video with CMS links

Design help Custom code
1

Hey guys and girls,

I am trying to control the place in time on an embedded YouTube video using CMS timestamp items… you can see the screen I want to control here: https://www.digitalforge.tv/lightbox-videos/vero-rerum-commodi-2
The full site is here: https://www.digitalforge.tv/old-home

After a lot of searching, it seems like this Video | Webflow University was what I wanted, but the link is dead.

Basically, I’d want the user to be able to click a timestamp and have the YouTube video jump to that time without having to reload the page or leave it.

Hopefully this isn’t hard! Lol

Austin

1 Like
3

“A Brief Lesson on Color Theory on Vimeo” is not a valid timestamp. That’s a URL.

4

Yes, but if I do put in a timestamp, it takes me to the actual YouTube video page, it doesn’t change directly within the page.

I just fixed it so you can see what I mean. I need to add the dynamic link for the time to the end of the video, but do it within the embed. And I need to be able to define it in the CMS… so I put in:
“Here’s where I talk about this thing”
3:20

And it will create the timestamp with that title that links to 3:20 in the video

5

I don’t think you can use the Webflow Video component for this, it will have to be loaded via the Embed Code component.

This is the API YouTube Player API Reference for iframe Embeds  |  YouTube IFrame Player API  |  Google Developers

You need seekTo() YouTube Player API Reference for iframe Embeds  |  YouTube Iframe-API  |  Google Developers

6

Will I have to load the whole video with that? It’s dynamic content too

7

Yeah, so instead of Video field in the CMS, now you will want to use a “Text Field” instead, so you can use the value in the Embed Code component to load a YouTube video that you can control using JavaScript.

8

Alright. I don’t think I know enough about JS or APIs to do this unfortunately, but I’ll try and give it a shot. I don’t need Timestamps, so I might just write them off as a luxury for a later date.