Stealing Webflow Code to make CMS Background Video a Thing
HTML-код
- Опубликовано: 5 авг 2024
- How to add background videos to a CMS Collection and make it reveal on hover.
// CLONE IT
👯♀️ try.webflow.com/cloneable-is-...
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae
// TOPICS COVERED
00:00 Inspo
00:20 Webflow CMS Setup
05:15 Stealing Code 
Хобби
Hey man are you sure you were testing on a browser that supports webM format at 03:00? It should load in priority over the other formats if you place it first
Hey Blaise! Thanks for the comment. I was having this issue about 2 months ago so decided to test it again (using Chrome 108 here). Looks like the browser will load the WebM when I name it as the first source like expected so that's good! Testing ground: video-testing-b448da.webflow.io/
From MDN: "Browsers don't all support the same video formats; you can provide multiple sources inside nested elements, and the browser will then use the first one it understands." So everything is behaving as expected then :). Thanks for nudging me to inspect again. developer.mozilla.org/en-US/docs/Web/HTML/Element/video#usage_notes
Wonder why Webflow background video generates with mp4 as the first source and not the webM 🤷♂? I would imagine that almost every browser out there understands mp4 so the webm will pretty much never get loaded, and maybe not worth transcoding in the first place. If they specified it as the first would make more sense to me. Maybe I'm missing something here?
@@webbae thanks for the tutorial! I’m curious about it myself too, maybe Webflow will explain it one day :D
Wow, so helpful. Thank you!
Great tutorial, super helpful with what im creating! Thanks a lot
Glad it was helpful!
Great hack. 👏👏
Thanks!
Thanks!
Wow! Amazing. I have a question, if they are a few videos play back the image it makes the website load slow?
Good question Alejandro. Need to be careful when working with a lot of video on web. There's an interesting lazy load technique described here: web.dev/lazy-loading-video/. You also want to make sure that the video is compressed properly for your use case (size vs. quality) and serve the WebM asset first (if it's smaller) as described in another comment on this video. I use Handbrake for compression although if you are hosting through Webflow like I am in this video it will compress the video pretty aggressively automatically. Additionally, you could use something like Finsweet CMS-load to control how many items load at once. Hope that helps!
@@webbae Yes! Thanks, will check the link and FInsweet tool
Thank you~That's a great tutorial~! But the mouse hover interaction disappears, when I set the parent div block above all of it as a sticky position to achieve the horizontal scrolling effect, the video didn't show, I've check the Z-index, all can work before the sticky div block...Do you have any ideas? 🥺
Hey! I’m not sure - need to see your example. Feel free to pop in the Discord.
Thanks man! Appreciated. Is there a way to use a CSS ":not()" for if there is no .webm video provided? So that we don't fade into nothing? :) (without duplicating image and set below, I've also a small scale 'zoom' hover trigger animation), or some other solution? Thank you!
Changing the order? So that the webm video animation is always on top, but with hover that will fade? Or do you have another better way? :)
good idea - I've been meaning to revisit this sort of layout especially when many video files are used. I'll keep it in mind for next build!
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 can do it by targeting the video src attribute on button click with javascript. I think ChatGPT could handle it.
Great tutorial! :) Can I adjust the object fit? The videos are slightly cropped in my case. I changed the object fit to "contain" in the source code but that didnt work out. Any ideas?
I usually use object fit cover and then fine tune the aspect ratio with the padding-top trick. Although you could do this with aspect-ratio since webflow released that. I usually set the aspect ratio on the container that has position:relative to match what the video file is and then just set the inner video element to position absolute, inset: 0, cover. Hope that helps - feel free to drop a link in Discord if you still need a hand.
I used a padding-bottom to fix this issue in the HTML Embed Code Editor:
@@lucreative2367 You saved me! Is there anyway to have both the mp4 and webm? How should I add both to your code?
Please, tell us how to make your own design of buttons for adding the quantity of goods to the shopping cart of an online store. Can't change standard buttons in e-commerce
Didn't know this - I don't do much work in Webflow ecommerce. If you want to send me a quick screen recording of an example problem I can take a look.
Is there any way to center the embed video through the code?
yes you could use CSS to handle that. Feel free to ask in discord with an example.
Awesome Tutorial thank you, the only thing for me I don't know what I did wrong but eventhough I drag the embed in my "photo-div" and apply all code like the tutorial. In the end my video displays over the whole page width (with 100%) and also first thing on the page, instead in the div behind my thumbnail...
Any Ideas what I did wrong? Apprechiate any help !!
sounds to me like something has position absolute and the parent doesn't have position relative. feel free to post an example in discord!
@@webbae What is your discord name or channel?
@@tizianabucher8554 discord.gg/C6JMaeDP
Super helpful, thank you! Did you or anyone struggle with a bug only in Chrome? First time loading it doesn't show some videos on hover, after refreshing it works perfectly.
Hey Alina - not that I know of! Can you share a project link is Discord. My hunch is there's some conflict between the hover animation and the videos loading. On refresh, the videos are probably cached and so the interaction loads correctly, but I would need to investigate thing in Chrome inspector! Thanks for bringing this up.
@@webbae Oh thanks for the quick response! Sure I can share the read-only link, you mean in the Discord Webflow Community Channel or where? This sounds pretty logical. What's weird to me is that the collection lists are inside a tab element - first tab seems to work, only the other ones struggle (and the second tab is set as the default active tab).
discord.gg/pwfDptfBZb
Did you ever make the second video to show the video stop playing on hover-out?
I don't think I did. You want it so that the video pauses on hover out? Should be easy enough with some of the methods offered by the API.
developer.mozilla.org/en-US/docs/Web/HTML/Element/video
You can use the play() and pause() methods as well as manually set the progress property.
Is there a way to keep the video from looping? I tried setting loop to ="false" but it doesn't seem to do the trick.
did you try just deleting the loop attribute altogether?
@Web Bae that did the trick! Thanks for getting back to me. Sorry if that seemed obvious 😬 I'm just starting to dip my toes in code.
@@magic_miles no problem at all glad to help!
Donut content is 1️⃣🍩🍩
"4 donuts is enough for today" 😉
@@webbae thanks for the insider ref 🫢
Here's an idea for a New Video / Tutorial. We are always struggling with HTML Email Coding. It would be great to design Mails in Webflow and somehow export the Code in HTML (With CSS inline). Do you think this is Possible?
Cool idea! I have the same problem hahaha. Will look into it and see what's feasible.
@@webbae Actually, this could be a Killing Feature of Webflow (or some plug-in). People will adopt it if solve this problem
@@thekyser Quick look shows it's def a difficult problem to solve. Email HTML/CSS != browser HTML/CSS. discourse.webflow.com/t/adding-css-in-html-for-email-template-with-webflow/10518