Webflow CMS background videos using Vimeo Pro
HTML-код
- Опубликовано: 5 авг 2024
- Thank you so much for checking out my tutorial! In this video I show you how we can build a Webflow project using Vimeo videos as backgrounds, pulled in from the Webflow CMS and set using the CSS property object-fit: cover..
Links from the video:
Emil's solution: webflow.com/website/cms-objec...
Try Webflow with our affilliate link - webflow.grsm.io/4838125
Follow me:
Website: www.tompiggott.co.uk/
Newsletter: www.tompiggott.co.uk/contact#...
Instagram: / tompiggottdesign
Facebook: / tompiggottdesign
Dribbble: dribbble.com/tompiggott/
LinkedIn: / tompiggottdesign
Music: “Still Standing” by Anno Domini Beats
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 !
This is amazing - ty so much
massively helpful cheers.
Dude... you're amazing. Thank you.
Top! And you pronounced it perfectly ;)
wild
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 :(
Has this stopped working?
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!
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
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.
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
Is it possible to trigger the video on mouse hover?