For anyone having trouble getting this to work, Vimeo changed the way these videos are hosted and I don't think this solution works anymore. You can still get the links from Vimeo in the same place, but now the code looks like this: Paste this code into the head of the page. This allow the video to be sized by it's parent (so you can either size the embed to whatever size you like, or make the embed 100% width and height and size it's parent div): video { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; Add an embed element on the page where you want to show the video and replace "ADD MP4 SOURCE CODE HERE" with the link from Vimeo: NOTE - you can experiment with where the video is hosted if Vimeo Pro isn't an option.
I want to change the video in a video player through a button or thumbnail it is basic, common on many website how comme it is hard to figure it out how to do it in webflow?
You should be able to use the light box element for that. You can put anything you like inside to act as the trigger, then just place a link to your video in the light box settings
It opens the video in a modal with an overlay which covers the page. If not, you’ll have to just create a custom interaction using Webflow interactions.
Hi Mate, great video but it seems the distribution links have changed since your video, the file links no longer work with the embed and work around from our very helpful friend that uploaded his code
@@harrymolyneux yeah I figured it out. You just need to change the code in the embed to the url of the required video def link. So make sure you use the same quality video for all the cms videos. Still keep the video ID the same.
@@wearestudiotonic would you be able to export a after effects video, that you've made, and use the same coding layout but with the after effects link?
@@diorcolee Yeah any video should work I think. I've only tried with MP4s so as long as it's that file type, it doesn't matter where it was produced. One thing to keep in mind with videos that autoplay on websites is to keep the length short and the file size small so they have a better chance of loading.
For anyone having trouble getting this to work, Vimeo changed the way these videos are hosted and I don't think this solution works anymore. You can still get the links from Vimeo in the same place, but now the code looks like this:
Paste this code into the head of the page. This allow the video to be sized by it's parent (so you can either size the embed to whatever size you like, or make the embed 100% width and height and size it's parent div):
video {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
Add an embed element on the page where you want to show the video and replace "ADD MP4 SOURCE CODE HERE" with the link from Vimeo:
NOTE - you can experiment with where the video is hosted if Vimeo Pro isn't an option.
Thank you, i was struggling with how to embed
This was exactly what I was looking for, thank you !
Dude... you're amazing. Thank you.
Top! And you pronounced it perfectly ;)
massively helpful cheers.
Has this stopped working?
I want to change the video in a video player through a button or thumbnail it is basic, common on many website how comme it is hard to figure it out how to do it in webflow?
You should be able to use the light box element for that. You can put anything you like inside to act as the trigger, then just place a link to your video in the light box settings
@@wearestudiotonic Does the lightbox will be over my page? if so I don't want that.
It opens the video in a modal with an overlay which covers the page. If not, you’ll have to just create a custom interaction using Webflow interactions.
You might have to write some jQuery to achieve this I think. Like when you click one thumbnail, hide all videos, show this one video etc
Would you be able to remake this tutorial with the working options? I am struggling to get this to work even with the pinned comment aaaa :(
wild
Hi Mate, great video but it seems the distribution links have changed since your video, the file links no longer work with the embed and work around from our very helpful friend that uploaded his code
Did you manage to figure this out? I'm stuck here too!
@@harrymolyneux yeah I figured it out. You just need to change the code in the embed to the url of the required video def link. So make sure you use the same quality video for all the cms videos. Still keep the video ID the same.
@@zacchaeusburrell719 Hey, could you explain that a little more in detail? I am uncertain if I understand everything correct.
@@zacchaeusburrell719 I got it, all good
@@sebobastiseppobas sorry mate, didn’t see this. Glad you got it sorted
Does this work with After Effects?
Sorry, I don’t understand the question?
@@wearestudiotonic would you be able to export a after effects video, that you've made, and use the same coding layout but with the after effects link?
@@diorcolee Yeah any video should work I think. I've only tried with MP4s so as long as it's that file type, it doesn't matter where it was produced. One thing to keep in mind with videos that autoplay on websites is to keep the length short and the file size small so they have a better chance of loading.
great! thanks! i hope u realized that u need to zoom in the text a lil bit more. :D
Thanks man, feedback noted for next videos!
Is it possible to trigger the video on mouse hover?