I've used this frequently in the past, but it seems Dropbox has changed their URL system and now it doesn't work anymore. :( Could you provide an updated tutorial reflecting the changes?
Great video. Wow, I am paying a Vimeo subscription just to host some background videos for my websites... it is just better image quality with Vimeo. But maybe I can try this!! I have one quick question. When you host like this, does it make the video quality somehow lower...? Or it is the same as the origin file(compressed file)? Thanks!! Subscribed!!
Thank you! I stubbled on this tut, I really appreciate it bc I have been looking for something crisp for Webflow. Do you have a solution where a timeline is added? Thx!
hey thanks for the video, its been uploaded on webflow but how do we get pause and play function on scroll to webflow? you where doing it on some other site
Hey! I use codesandbox usually for tutorials and VS Code for my own projects. Check out this video for more on both of those tools. Better Webflow Custom Code Workflows (Typescript, VS Code) ruclips.net/video/gq0jw3_d5Ig/видео.html
Hey, quick question on this.. awesome video by the way! I have a .mov file on Dropbox that I can't get to play - should this still work the same? It's a simple 3D animation without a background that I want to play on the screen on an endless loop but can't even get it to show up haha
Feel free to pop in Discord and ask. You'll need to share a link. My guess is that there is a problem with your css/styles and the video doesn't have any width/height but I won't know until I see it!
Thanks so much for this! I got the video playing but I’d love to do the play when in view function but I’m confused where you are writing the code from 10:05 onwards? I’m new to code so I’m probably missing something…
@@webbae I’ll probably just let it play on auto. Does the bandwidth only count per page load. So a 14second video at 20mb would only use that once or does it count as 20mb every time it loops?
If i build it with low quality in Webflow and when im done do a code export, cant i just swap the videos out in the code for the HQ versions before i give to the code to a hosting site?
Great video! I subscribed. Do you think you could show us how we could add a play icon that shows before the user clicks the video (then disappears during video play) and shows again when video is stopped on second click? Thanks!
Great Lesson but seems its dont work on mobile devices, cause its an embed link and just dont play on Android or Iphone, is it happening with your page too?
GitHub is a great alternative to using dropbox if it doesn’t work for you. Also, if you’re just using iPhone and noticing, it’s not working, check that it’s not in low power mode.
Tons of stuff to tackle with video for sure. You could use intersection observer to tell when the video is in view and then play/pause it based on that.
Hey Keegan, I just now tried to access the code snippet (after subscribing and clicking the "Web Bae Code Snippet Library" link in the subsequent email), but I get taken to a Notion page that reads: "You do not have access to Keegan's Notion. Please contact an admin to add you as a member." -- while signed into Notion with the same email address used throughout. Any suggestions?
Hey, sorry to bother you, but i was wondering how could we link an icon (play button) to the player? Thank you in advance for making this video, helped me a lot!
Hey - I'm not sure on this one exactly but in general you could add the button to the page then set up the event listener in javascript and programatically trigger play/pause. addEventListener querySelector Video API All your friend here! ChatGPT should be able to get this if my assumptions about your use case are correct.
Hi check out this video: ruclips.net/video/1Wpb9TqX_CQ/видео.html You can see a longer and more in depth version here: ruclips.net/video/gq0jw3_d5Ig/видео.htmlsi=rGL-4ipLvXh_kHpL
Love this tutorial! Thanks so much! Do you know of how to make this work when the source is a vimeo file? Been trying for ages and not having it work successfully
@@webbae Excellent! I'll give that a look. Really Appreciate it. Gonna check out your Webflow 201 course as well. Excited to take things to the next level
@@webbae Any suggestions on how to handle these videos on mobile? Do you disable them? If so how can I have a static image replace it? If not how do you handle performance issues. I am getting some bad page insights scores due to the videos
@@Nicholasdaniel93 how big are the video. I usually compress 720p at 30fps. Your videos hopefully aren’t longer than a few seconds. Another option is to lazy load the videos with a JS library. The data-poster-url attribute can be used to display a thumbnail image of the videos haven’t loaded yet. Working with lots of video can be tricky for sure!
Thanks for such a great explanation! However, it seems it is not working on safari desktop, iPad or mobile (doesn't work on iPad and mobile on chrome as well). I was able to figure out that the issue is the dropbox link. Do you also have a similar problem or do you maybe know how to solve this issue?
Sorry to hear that! Can you send me a link to your live site so I can have a look? I just tested it with a new project in Safari desktop and mobile and it's working over here. This video is more recent and a little more complex but has additional workflows that might help. ruclips.net/video/5jFWPuH2P1Q/видео.html
@@webbae yeah I tried someone else's video link with the same code and it worked everywhere. Anyhow, I was able to fix it by hosting my video elsewhere and getting a new link. Now it works on all devices and browsers. Thanks for the reply!
Oops I think I missed the point about the bandwidth. Now the videos stopped working. Pretty sure I had them on while I working in Webflow. Does it reset in 24h and they come back online?
@@webbae Yep came back in 24h. Working as it should now. Your tip about breaking the link in Webflow is crucial (if you are working on the page in webflow).
@@philphilphil Glad it helped - now that I think about it I feel like the video should be caching in the browser once it loads the first time but not sure. Oh well as long as it's working for now haha.
Hi Keegan, thank you so much for a great tutorial! - quick question: I want to embed my videos in a div block inside a container that is 1200px max width aligned to the center of the page rather than full screen, but can't get them to be responsive. When I try to apply your horizontal scroll fix, it turns into a mess. Sorry if this sounds very obvious, I'm just a beginner trying to figure things out :) - any feedback would be super appreciated. Thank you again!!!
Here's a read-only with 2 examples that I think might get at what you are trying to accomplish. Let me know if you have any questions. preview.webflow.com/preview/video-example-987ee6?preview=416bd0f4f8cee0081e5fd7723216af3a&workflow=preview
@@webbae That worked - thanks a million!! Feel free to unhost the video on your end. Do you by any chance happen to know why the Webflow HTML editor won't let me type code directly into it? I can cut and paste it, and delete portions of it, but once it's saved I can't add anything else by typing. This is not a critical issue, but it becomes time-consuming if each time I restore a video link I need to find the code snippet on Google Docs etc. and cut and paste the whole thing again into WF instead of just typing back the "l" like you do in your example. Hope this makes sense, sorry for the long rant and thank you very much again!! :)
Yes - set autoplay and playsinline (Believe you need this one for safari) attribute to true. Use a click event listener to call the .pause() and .play() methods. developer.mozilla.org/en-US/docs/Web/HTML/Element/video
I've used this frequently in the past, but it seems Dropbox has changed their URL system and now it doesn't work anymore. :( Could you provide an updated tutorial reflecting the changes?
URL is still working for me it seems - were you able to solve this?
Same here. they add a key now. This won't work anymore.
@@Jonathan_Bowman thanks for the update - I'll do some research and upload a video on how to host elsewhere... probably github.
Hey! I'm using internet archive to upload my videos and it works just fine. Super recomended.@@webbae
It works for me when I simply copy the link and only change the last bit from 'dl=0' to 'raw=1'
This is awesome! Thank you!
i see a lot of comments saying that it doesn't work - it seems to be working fine for me! THANK YOU SO MUCH! You're a rockstar!
thank you corina - happy to hear that and appreciate the acknowledgement!
Great Tutorial mate, it help me a lot :)
Thank you, kind Sir. You are the real deal!
thank you!
Great content as always!
Thanks Vic! 🦷
Amazing ❤❤❤
Great video.
Wow, I am paying a Vimeo subscription just to host some background videos for my websites... it is just better image quality with Vimeo. But maybe I can try this!!
I have one quick question. When you host like this, does it make the video quality somehow lower...? Or it is the same as the origin file(compressed file)?
Thanks!!
Subscribed!!
legend
Thanks Patrick!
Thank you! I stubbled on this tut, I really appreciate it bc I have been looking for something crisp for Webflow. Do you have a solution where a timeline is added? Thx!
What do you mean by timeline? Do you have an example?
hey thanks for the video, its been uploaded on webflow but how do we get pause and play function on scroll to webflow? you where doing it on some other site
You could use scroll trigger along with the browser video API. You could also probably use a lazy load library of some sort to control that too!
this tutorial is so great. do you have any idea how to implement lazy load onto these DB videos?
I’ve used this library with videos coming from AWS - github.com/verlok/vanilla-lazyload
Hi . I am new using webflow and I don't understand where you put the JS code. Is it some external tool? Pd: Thanks for the video
Hey! I use codesandbox usually for tutorials and VS Code for my own projects. Check out this video for more on both of those tools. Better Webflow Custom Code Workflows (Typescript, VS Code)
ruclips.net/video/gq0jw3_d5Ig/видео.html
Hey, quick question on this.. awesome video by the way! I have a .mov file on Dropbox that I can't get to play - should this still work the same? It's a simple 3D animation without a background that I want to play on the screen on an endless loop but can't even get it to show up haha
Did you get this to work? To my knowledge the html tag should support a .mov file. Can you hop in Discord and drop a link?
Great Video!
However, I'm facing a problem that the video works in the designer preview but not on published site. What could be the problem?
Feel free to pop in Discord and ask. You'll need to share a link. My guess is that there is a problem with your css/styles and the video doesn't have any width/height but I won't know until I see it!
Thanks so much for this! I got the video playing but I’d love to do the play when in view function but I’m confused where you are writing the code from 10:05 onwards? I’m new to code so I’m probably missing something…
hey glad it helped - not sure without an example feel free to ask in my discord #questions channel.
@@webbae I’ll probably just let it play on auto. Does the bandwidth only count per page load. So a 14second video at 20mb would only use that once or does it count as 20mb every time it loops?
@@MrLionelrichtea I would assume it caches the video so does not count as 20mb load each time.
If i build it with low quality in Webflow and when im done do a code export, cant i just swap the videos out in the code for the HQ versions before i give to the code to a hosting site?
I would think that should work but I don't often export code from webflow for hosted sites.
@@webbae Thanks for the reply. I want to just have raw code without dependencies so i think this is my best option.
Great video! I subscribed. Do you think you could show us how we could add a play icon that shows before the user clicks the video (then disappears during video play) and shows again when video is stopped on second click? Thanks!
Sure I’ll try to see if I can add it to the lineup.
@@webbae Nice one. Appreciate your work!
Great Lesson but seems its dont work on mobile devices, cause its an embed link and just dont play on Android or Iphone, is it happening with your page too?
GitHub is a great alternative to using dropbox if it doesn’t work for you. Also, if you’re just using iPhone and noticing, it’s not working, check that it’s not in low power mode.
i think you should make a video about how to stop video playing when is out of view, nice video btw
Tons of stuff to tackle with video for sure. You could use intersection observer to tell when the video is in view and then play/pause it based on that.
Hey Keegan, I just now tried to access the code snippet (after subscribing and clicking the "Web Bae Code Snippet Library" link in the subsequent email), but I get taken to a Notion page that reads: "You do not have access to Keegan's Notion. Please contact an admin to add you as a member." -- while signed into Notion with the same email address used throughout.
Any suggestions?
Sorry about that Leon! Swing by the Discord: discord.gg/Tj5YEG69 or DM on Twitter and I'll get you set up
@@webbae Much obliged Keegan. See you over at Discord
Hey, sorry to bother you, but i was wondering how could we link an icon (play button) to the player? Thank you in advance for making this video, helped me a lot!
Hey - I'm not sure on this one exactly but in general you could add the button to the page then set up the event listener in javascript and programatically trigger play/pause.
addEventListener
querySelector
Video API
All your friend here! ChatGPT should be able to get this if my assumptions about your use case are correct.
Hey, really cool. AWS solution would be great. Thanks.
On it! Coming soon to a screen near you.
I just want to ask how do you connect the js to the webflow ?
Hi check out this video: ruclips.net/video/1Wpb9TqX_CQ/видео.html
You can see a longer and more in depth version here: ruclips.net/video/gq0jw3_d5Ig/видео.htmlsi=rGL-4ipLvXh_kHpL
Hey, I am trying to get access to your library. Tried 2 times. No email received
...
ok got it :) 😀
Love this tutorial! Thanks so much!
Do you know of how to make this work when the source is a vimeo file? Been trying for ages and not having it work successfully
I'm pretty sure you need Vimeo PRO account to get direct video links.
@@webbae Excellent! I'll give that a look. Really Appreciate it. Gonna check out your Webflow 201 course as well. Excited to take things to the next level
@@webbae Any suggestions on how to handle these videos on mobile? Do you disable them? If so how can I have a static image replace it?
If not how do you handle performance issues. I am getting some bad page insights scores due to the videos
@@Nicholasdaniel93 how big are the video. I usually compress 720p at 30fps. Your videos hopefully aren’t longer than a few seconds. Another option is to lazy load the videos with a JS library. The data-poster-url attribute can be used to display a thumbnail image of the videos haven’t loaded yet. Working with lots of video can be tricky for sure!
Thanks for such a great explanation! However, it seems it is not working on safari desktop, iPad or mobile (doesn't work on iPad and mobile on chrome as well). I was able to figure out that the issue is the dropbox link. Do you also have a similar problem or do you maybe know how to solve this issue?
Sorry to hear that! Can you send me a link to your live site so I can have a look? I just tested it with a new project in Safari desktop and mobile and it's working over here. This video is more recent and a little more complex but has additional workflows that might help. ruclips.net/video/5jFWPuH2P1Q/видео.html
I have a channel in my discord for questions: discord.gg/Tj5YEG69
@@webbae yeah I tried someone else's video link with the same code and it worked everywhere. Anyhow, I was able to fix it by hosting my video elsewhere and getting a new link. Now it works on all devices and browsers. Thanks for the reply!
@@simritbhatia6314 it worked for me with Dropbox - maybe you hit the free tier bandwidth limit then? Where did you end up hosting your video?
Oops I think I missed the point about the bandwidth. Now the videos stopped working. Pretty sure I had them on while I working in Webflow. Does it reset in 24h and they come back online?
I think so but not sure. Did you figure it out?
@@webbae Yep came back in 24h. Working as it should now. Your tip about breaking the link in Webflow is crucial (if you are working on the page in webflow).
@@philphilphil Glad it helped - now that I think about it I feel like the video should be caching in the browser once it loads the first time but not sure. Oh well as long as it's working for now haha.
Hi Keegan, thank you so much for a great tutorial! - quick question: I want to embed my videos in a div block inside a container that is 1200px max width aligned to the center of the page rather than full screen, but can't get them to be responsive. When I try to apply your horizontal scroll fix, it turns into a mess. Sorry if this sounds very obvious, I'm just a beginner trying to figure things out :) - any feedback would be super appreciated. Thank you again!!!
Here's a read-only with 2 examples that I think might get at what you are trying to accomplish. Let me know if you have any questions. preview.webflow.com/preview/video-example-987ee6?preview=416bd0f4f8cee0081e5fd7723216af3a&workflow=preview
One maintains aspect ratio while the second keeps full screen height.
and here's the published site. video-example-987ee6.webflow.io/
Let me know when you are done so I can unhost the video :)
@@webbae That worked - thanks a million!! Feel free to unhost the video on your end. Do you by any chance happen to know why the Webflow HTML editor won't let me type code directly into it? I can cut and paste it, and delete portions of it, but once it's saved I can't add anything else by typing. This is not a critical issue, but it becomes time-consuming if each time I restore a video link I need to find the code snippet on Google Docs etc. and cut and paste the whole thing again into WF instead of just typing back the "l" like you do in your example. Hope this makes sense, sorry for the long rant and thank you very much again!! :)
Is it possible to create infinitive loop and to switch music on and off on click? @Web Bae
Yes - set autoplay and playsinline (Believe you need this one for safari) attribute to true. Use a click event listener to call the .pause() and .play() methods. developer.mozilla.org/en-US/docs/Web/HTML/Element/video
@@webbae Yep it works perfectly, thx a lot!!!
@@webbae and that's how started my journey to JS hahahaha :D
I canceled my Vimeo membership thanks to your video. Came to tell you.
Thanks :)
Save that money!