▼
Streaming live at 10am (PST)

Control time of embedded YouTube video with CMS links

#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 https://help.webflow.com/how-to-control-youtube-video-using-javascript 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

#3

"https://vimeo.com/114900089" 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 https://developers.google.com/youtube/iframe_api_reference

You need seekTo() https://developers.google.com/youtube/iframe_api_reference#seekTo

#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.