How to Webflow: Playing dynamic background videos on mouse hover (Tutorial 2020)
HTML-код
- Опубликовано: 11 июл 2024
- Link to original question:
ruclips.net/user/postUgzuvxMH...
The code I used can be found at:
pastebin.com/FmN6rxKw
Join the Pixel Geek Community:
pixelgeek.community
-------
I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
-------
Like what you see? Subscribe here:
ruclips.net/user/subscription_...
-------
/ thepixelgeek
/ pxlgk
pixelgeek.co 
Хобби
Perfect solution! loving the effect, it's perfect for my new portfolio. Thanks Nelson!
Amazing! Definitely going to add this to my site this week!
I remember you demoing this for me sometime ago. Thanks for returning it into a tutorial! Now that I'm finally getting around to implementing this is super helpful. Hopefully they're able to do this sort of thing natively in CMS in the future. This is a great solution till then!
Glad I could help!
@@pixelgeek I've implemented this for a 100% width header (a DIV inside a section), but the BG video width doesn't scale across breakpoints. So on smaller breakpoints, the video appears very zoomed in. Is there anything I can do to automatically scale the video size down with screen resolution?
You're awesome bro! I just made the switch to webflow working on my first client site thanks!
I am honored that you accepted my question and even did a tutorial.
It also works well so far. But maybe you have an idea how to make the video play from the beginning every time you move the mouse over the picture. The video is currently playing in the loop in the background. The video should stop at mouse out and start again when mouse hovering again. The idea is, when I have a head shot of a team member, that the team member suddenly comes to life at mouse hover and freezes again at mouse out to a still image.
I'm looking to do exactly the same thing! Did you find any luck?
Also was hoping it would function like this... Anyone done this?
This tutorial was AMAZING
your videos are 100 times better... thank you so much!!!
Wow, thank you!
THIS IS GREAT, PLEASE MAKE MORE ADVANCED TUTORIALS
damn sir it was sooo helpful and awesome video for me . I learnt so much of webflow from you and this one was great and unique...
Niiice. Thanks!
I love you.... this is awesome.
Hey, thank you for the awesome tutorial.
Quick question, when the coding is done, can I easely change the video in the collection without having to change the code or do I have to change the code everytime I want to change the video?
My goal is to follow your tutorial and make some kind of news feed, so it has to be easy to change the news every once in a while.
really love your videos, thanks so much for sharing the knowledge. i think you should work on more informative thumbnails. browsing your channel is a bit hard when you're searching for new things to learn rather than browsing specific keywords. maybe some big pictures of the key features discussed in the video would help, instead of your - dont get me wrong - face. :D it would also attract more viewers cause now almost every video looks like a random livestream
Your videos are very professional, I like them all and very helpful they are.
I have an isssue.
I embeded a VIMEO movie and sadly when the site loads in the vimeo play controll line covers the bottom part of my nice thumbnail instead of just displaying a little play me triangle in the middle of the Thumbnail like in case of RUclips.
how to make this video control line get displayed on mouse hover?
Great! I was looking for this! Thank you.
I have 2 questions:
1. Can I host the videos on a separate website?
2. If the video has sound will the sound be on when you hover over the image and the video starts?
Thanks for watching :)
As for your questions...
yes. you can host them on RUclips or Vimeo, but you may have to remove the audio from your videos. You don't want them all playing at the same time.
@@pixelgeek would it be possible for you to do a short video showing how to implement this with Vimeo and RUclips? I made a post on the forum more than a year ago but it didn't get any traction. There's a tutorial someone made illustrating how to do this, but It's not possible to contain the video within a section. It defaults to the top of the page for some reason. I imagine there's a bit of custom code that needs to be introduced?
Disney+ has something like this on it's member site. When you hover over the buttons at the top, they expand a few percent and play a video. Could you use this technique to recreate that effect? In other words, can you scale up the video slightly on hover? The Disney+ buttons also feature a text label centered on the button that stays on top even when the video is revealed. Any idea how to do that? Thanks so very much!!
Hi :) Thanks for watching. Please consider joining my community and posting your question on the project help board:
chat.pixelgeek.community/c/project-help
Can i create a dynamic video with audio? I want to do the trick where i can only listen to audio when hover over one video but keep other windows or videos playing except without audio?
Quick question: I haven’t tried this but I wonder if you could put a background video as the base item and then cover it up with an image. Then use interactions to make the image disappear on hover to reveal the video playing in the background?
I can't see why not. You'd just have to make the video and image the same sizes and display settings and then make the interaction. I like your thinking 😊
Isn't that literally what's in this video??
Tom , id have to watch it over again to remember exactly, but no. My proposal was different that what Nelson shared.
Hey Pixel Geek, i've noticed there is no tag for Video ID when i go and try and do this. Is there another way around this?
Same problem, ever figure out where the video id bit is?
If the video has audio will it play the audio on hover as well?
What about muted auto-played video background on mobile? I'm having a real problem with one of my clients. It shows a play button on safari if I view it on mobile! It doesn't start on its own
I want to create one thing like when i hover video start playing and when i hover out then video play stop.thanks
can you share read only link or clone of this?? please
except there is no Video ID included in the dropdown.
This is great but no sound is it possible that they can be heard ? 15 second each
Is there any way to pause the video when hovering off?
yes. but you would need to add some custom javascript or jquery to make that happen.
@@pixelgeek Great video! I'm also trying to pause when hovering off, trying to find this additional code somewhere but with no success
@@pixelgeek I would really like this feature as well. Could you possibly share that code?