🔴 LIVE - Background Videos for Webflow CMS Items
HTML-код
- Опубликовано: 6 авг 2024
- Get the cloneable (affiliate link)
webflow.grsm.io/cms-video
Get the background video code at timothyricks.notion.site/Embe...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096
I was stuck for a couple hours in frustration not being able to get it to work. Finally realized your code has classes assigned to the div 😅
If anyone else is getting stuck with this, just delete the classes from the embed code and style the embed element on Webflow.
Phenomenal tutorial. Simple, straight to the point, and exactly what I needed. Thanks dude.
That's such a great way to make collection items more interesting. So powerful, thanks Timothy!
Thank you Timothy, this is incredible!
Thank you so much Ricks. You just save my day🙌
This is brilliant, thanks Timothy!
Man... this was so refreshing
This is fabulous, thanks so much, I've been trying to work out how to do this for a while...
That was probably one of the most helpful Webflow videos I've seen to date! Thank you!
Hey Timothy, this is a great tutorial I was struggling with this issue. also, I have seen your work it's great. I am glad that I subscribed to your channel.
the hero we don't deserve - thank you so much
Hosting videos on Webflow is such a interesting hidden way to this 😃
Awesome man, thanks a lot!
Hi Tim! I have a question: Is it easy to set the video loop to begin on hover and not constantly in motion?
Thanks man!
This is great. Anyone know how to sort them alphabetically? I’ve tried to use sort order before but never really figured how it works of if it works at all
Hello, Is there a way to add a play/pause button to the video when you embed the video from the Webflow link?
you can also use an AWS bucket! Takes a bit of setup if you want it to be cloud-distro'd but it's also a great 3rd way to host lightning fast video for free
have you been able to tie this to a lightbox/modal for users to open and play the video selected on the page?
is there any way to create reveal an autoplay video on hover while both the trigger element and hover video are cms items? maybe an ID or custom attribute is required?
do you also have a way to add a play/pause button?
Hi! thanks for the video! is it possible to do the same ting but with a video link to youtube? or any other way to work around getting vimeo pro? hehe
Great video. I'm trying to find a way to have full bleed videos as part of my CMS slider. Iframe is to complicated so I'm trying a workaround by using a background video element but I can't seem to link the background video element to a direct link in my CMS. This video popped in my search, it's a little different but gave me some hope. Any ideas of how to link a background video element to a direct link video? Thanks!
This is absolutely Fantastic but SOS Can't find a way to incorporate audio. :/ anyone have any suggestions
Is it possible to set these video items to display as a lightbox?
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?
Tim, there’s a way for WebM videos to work on Safari if we set some code in the Embed. WebM videos are way more lightweight than mp4
Do you mind sharing how please?
Hi Tim thanks for this dude. Is it easy to set the video loop to begin on hover and not constantly in motion?
I would like to know that too!
Btw, have you not posted a tutorial on using noise/grain in webflow? I've been searching your channel but can't seem to find it. I noticed you had it in your notion notes as well. I love grain and want a nice way to incorporate it in to my builds better!
I haven’t done a tutorial on that one. The grain js ended up not being the best solution for all use cases so now I just tile a 50x50px grain gif to have full control of the sizing and spacing.
Background video link can be copied right in component settings, there's a small arrow-link under the video preview.
Oh awesome! Thanks for sharing!
@@timothyricks Got some weird results copying from that link - video would stop after a couple seconds. Compared it to the links on the published site and they were different. Webflow support confirmed this and recommended I take the source video from the published site. A little bit of a bummer since I wanted to make it easy for my client to do this, but just a heads up to others if they have a similar issue!
Hello, I followed all steps, but my video appeared to be only 50% in height, I tried to set everything in 100% height, and it's still got cut off top and bottom for some reason, and I had to delete the height 100% in the code, otherwise my video just won't show up, after deleting, the video did show up but it's short in height, idk what to do...
How do you add 2 or more videos in one collection in one collection item using this method
Hey, Tim - Great video!
I cloned your Vimeo Video Player project from Webflow, and it works great - but it drastically impacts my page performance. Specifically, it's the "Avoid enormous network payload" error that's the issue.
I've tried using both the 1080 and 720 options for the link. When running it through the Lighthouse tool in Chrome, I've noticed the file size get smaller, but it's still too high.
I've also tried uploading a smaller compressed video file to Vimeo before copying the link, but same result.
What are some things I can do to still use this feature without negatively impacting the page performance?
Thanks
+1 any tips on how to do background video without tanking loading performance?
@@chandlerr1912
Hey, Chandler. I ended up not using this method for that sole reason. There isn’t really a way to do it, and still have a good page performance.
I signed up for this platform called Vidzflow for the 1 background video I have on the page. I had to drop it all the way down to 560p and make it no more than 15 seconds.
Good luck to you.
Any ideas?@@chandlerr1912
lifesaver
Legend
Master of puppets Tim thank you so much for shering this tricks! I've tryed this already and everything works awesome! I want to ask you if this metods works in mobile too because I have that issue, in desktop everithing is fine but if I see the site in my mobile the video background doesn't autoplay. Hope you can help me whith some advise, thank's man!
Is your phone in low power mode by any chance? All videos are disabled in that case.
@@timothyricks thanks men didn’t thought that affects the background videos too, thank you so much for the reply!
Does this still work with Vimeo videos? It sounds like they may have changed how they host things recently, and I'm having trouble even figuring out if it's still possible with vimeo direct links.
Same here, let me know if you find an alternative
Looks like WebFlow has updated to not allow the video hosting work-around. Such a pain to not be able to host video, seems like such a basic feature.
too expensive for servers
Someone correct me if I'm wrong, but something to keep in mind: this background video CMS hack has the limitation of background videos not playing on iOS
Any video doesn’t autoplay on IOS when the phone is in low power mode. That limitation isn’t specific to Webflow background videos.
Why is better to use the direct links rather than the vimeo player?
That way it won't show the Vimeo control interface (play button etc.)
@@Jordy666sic But he's already using a pro vimeo account, which means he can avoid using the vimeo interface anyway, right? Like by using query parameters and/or video settings