Ovidiu
How to embed a YouTube video with a timestamp in Webflow
Memberscripts needed:
Tutorial:
Cloneable:
Pourquoi/Cas d'utilisation
- A website providing educational materials or tutorials where you can link directly to a specific point in a video where a key concept is explained.
- Highlighting a specific feature or moment in a video, ensuring visitors see the most impactful content first.
Embedding a YouTube video with a timestamp in Webflow
This guide will help you embed YouTube videos which start at a specific timestamp. Additionally, you’ll be able to create URLs with parameters that change the starting time of the video embedded on the page.
To embed a YouTube video with a timestamp in Webflow, we’re going to use MemberScript #141 – Start YouTube Embed at Specific Time. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
Start by embedding the YouTube video on your page as you normally would and add the following attribute to it:
· ms-code-yt-start=”vid”
With the value set to “vid” (it can be whatever you want), you can now use the “?vid=XX” (where XX represents seconds) parameter to create custom URLs that tell the video where to start.
Now if you want the video to start at a specific time by default even if there is no parameter in the URL, add this other attribute to the video:
· ms-code-yt-start-default=”XX” (XX represents seconds)
Just input the number of seconds from where you want the video to start and that’s it.
Making it work
Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #141 custom code to your page, before the closing body tag.
Conclusion
That’s everything, you can now go ahead and test the embed on your live site.
Si vous souhaitez utiliser notre projet de démonstration pour commencer, cliquez simplement sur le bouton ci-dessous pour l'ajouter à votre site Webflow.
Our demo can help you embed a YouTube video that starts at a specific timestamp on your Webflow site.
Take me to Cloneable!
Ajoutez des adhésions à votre projet Webflow en quelques minutes.
Plus de 200 composants Webflow clonables gratuits. Aucune inscription n'est nécessaire.
Ajoutez des adhésions à votre projet React en quelques minutes.