Hey, great video (and I don't think you go too fast!) Is there any way to adjust how the video sits in its element? As I resize my window, it grows/shrinks from the center point, but I want it to be anchored at the top and grow down if necessary. Is that possible?
Thanks! It should be the default behavior, yes. Make sure the Background Video is set to 100%, then it should just absorb the full height of whatever container its in. The one I made still behaves that way so feel free to clone and take a look.
The VH on the section was perfect! I somehow ended up with a horizontal scroll when I did height px for the video and did the breakpoints...redoing the section with vh made it way better with work with
Hey Tyler, glad that was helpful! Yeah set pixels can sometimes be tricky to keep up with as the screen size fluctuates between devices. VH definitely makes things smoother but also has it's limitation sometimes, mostly with horizontal/landscape phones since the viewport decreases drastically when you turn your phone sideways! Learned that the hard way haha so just double check everything 😉👍
@@CullenKuch I appreciate the acknowledgement! I do check with multiple screen sizes in front of me (my phone, desktop, laptop); double checking everything at the various breakpoints. It's tedious to double check every time I make one change but it's better than messing up later and having no idea.
Hey Tochi, make sure whatever your video is in has set dimensions. For example it could be 100vw to take up the whole width of the screen. And then make your video width 100% so it absorbs the width of its parent container. Or if it's not inside anything, just give your video element a max-width of 100% or 100vw. Hope that helps!
Hey there! The background video plays for me on mobile iPhone just fine, I tried it both on Chrome and Safari. Try checking if battery saver mode is enabled on your phone, I've read sometimes that prevents it from playing. You can also try clearing the cache or cookies. And if none of that works it seems like someone found a little custom code solution you can add in your Webflow project here: discourse.webflow.com/t/make-webflows-background-video-play-on-ios-and-android/52028
Hmm try targeting the parent elements as well. If it's in a link block or something that underlined behavior will trickle down. So just check them all for that "text decoration: none" to be applied!
Hey there! It may just come down to finding a good file compressor to make sure your video is within the size limit. There are two sites that seem to be popular for Webflow video compression - Clipchamp or HandBrake. You could also shorten your video and have it play in a loop, it is just background and shouldn't be some long extravagant or distracting element. If the quality is not the best you could always add a low opacity overlay or text content on top so the focus is shifted or the lower quality isn't as noticeable. Hope that helps!
Do you know how to setup the videos so they can 1. Start to play only when they are in view 2. Start at a particular time in the video (for mobile I want it to start at 15 seconds and not from the beginning)
Hey Derrek! In order to have it play only when in view, this would require some custom code I think. You could turn off the autoplay of the element in its settings. Then turn the play/pause button on. Then you'd have to write a little function that "clicks" the play/pause button when the bg video element is in view. And to have mobile videos start further along you'd probably have to "display none" the desktop video on mobile, then display a different bg video element with a different file that starts when you want it. Hope that helps!
Hi! Thanks for the video. Could you please help me to make the header on the background video? So that, video will play while the header will be on the top of video (overpayed).
Hey Mila, you should be able to change the z-index for your heading and background video element in the position settings. Make sure the video has a lower z-index than the header and it will live behind it!
@@CullenKuch Thank you a lot! Now it works, but unfortunately now I can`t add an overlay on my video background :( Maybe you know how I could fix it? I made everytning according to your video...
@@milabugaieva8451 Hmm okay so you would have your section with a fixed height, say 70vh. Then put the background video element inside that section, make its height 100%. Then with the background video element selected, click the background + button and add the color overlay. It should apply right over it. Then your headings and whatever you want on top of the video will live nested inside the background video element itself, just like a div. Hope that helps!
Thats great and all but background vids arnt interactive only youtube vids are which brings me to my next question , where is the loop feature for youtube vids???
Yes the background video element is meant to just be moving imagery as a background so it's not interactive. Only the video element will have the controls. You may be able to use an iFrame embed element in some custom code and add the autoplay or loop settings to that. Finsweet also just released an auto video attribute, might not be the same thing but could be worth looking into!
Hey Morteza, looks like someone found a way to cheat this using blending modes and element positioning! webflow.com/made-in-webflow/website/Knockout-Text-with-Video-Background
Hey Abishay, I actually touched upon this in another video. You’ll have to add a separate audio controller and just try to sync it up with the background video by having them both play upon page load. Take a look here, hope it helps! ruclips.net/video/RCAsjcw4Qxo/видео.html
Thanks Dom! It's pretty simple using the embed element. You can put an HTML embed element into a container or section that is 100vh/vw or the dimensions that you want. Then set your inline styling for the element in the custom code to 100% height and width so it absorbs the same styling dimensions. You just have to link a vimeo file or wherever the video is living. Here's an example I saw somebody do that you can explore! webflow.com/website/background-video-embed
Hi Cullen, great video and content! I was wondering if you know how to add some custom code to the background video elements. Specifically to force the video to autoplay and mute and loop. I don't encounter any issue on androids and firefox and chrome, but on safari and iphone the background video will not play only with the options set in webflow of autoplay and loop. What I would like to add is something like , if that would be an html attribute. but didnt figure out how to do that in here. Thanks a lot!
Hi! So mine seems to work on iPhone and Safari mobile when I have the background video element settings set to autoplay and loop. It plays right upon page load. But if yours still doesn't here is some code that might help trigger it. Make sure you give your background video element an ID in Webflow, as well as the play/pause btn they provide for you. This code will check whether or not the video is already playing when the page loads. If it is not, then it will click the play button for the user so it looks like it autoplays. Make sure you have those IDs set and paste the code in the page settings. Here is a link to the JavaScript but it's also set up in my cloneable project linked above which might be more helpful. Good luck! codepen.io/cullenk/pen/VwXXORV
Hey Ryandi! The actual background video element won't scale with smaller screens so sometimes your content in the video might be cut off so it maintains the full background dimensions. One solution is to crop your video for the different sizes and have a different file for each one. Then have a different background video element for each viewport size. Display "none" the element when it's not being used and display the correct size video on the corresponding viewport. Hope that helps!
Hey Ani, I'll have to add this to my list. Webflow does have an option in any Slider element's settings to turn on "infinite repeat slides" though so you can always start there or check out their documentation on Sliders. university.webflow.com/lesson/slider
dude you're going too fast. I had to triple check that you had to go all the way down to components section in the sidebar to choose background video. Slow down.
Sorry about that - I’ll try to be aware of that in future videos. If you feel like you missed anything feel free to clone the project or look at in Webflow directly to copy at your own pace!
Hey, great video (and I don't think you go too fast!) Is there any way to adjust how the video sits in its element? As I resize my window, it grows/shrinks from the center point, but I want it to be anchored at the top and grow down if necessary. Is that possible?
Thanks! It should be the default behavior, yes. Make sure the Background Video is set to 100%, then it should just absorb the full height of whatever container its in. The one I made still behaves that way so feel free to clone and take a look.
The VH on the section was perfect! I somehow ended up with a horizontal scroll when I did height px for the video and did the breakpoints...redoing the section with vh made it way better with work with
Hey Tyler, glad that was helpful! Yeah set pixels can sometimes be tricky to keep up with as the screen size fluctuates between devices. VH definitely makes things smoother but also has it's limitation sometimes, mostly with horizontal/landscape phones since the viewport decreases drastically when you turn your phone sideways! Learned that the hard way haha so just double check everything 😉👍
@@CullenKuch I appreciate the acknowledgement! I do check with multiple screen sizes in front of me (my phone, desktop, laptop); double checking everything at the various breakpoints. It's tedious to double check every time I make one change but it's better than messing up later and having no idea.
Thanks Cullen
You're very welcome Richard!
Super thank you for this one.
My pleasure Hujan, glad it helped!
Hey, is it possible with the basic version or do you need a more expensive version?
Hey Tim, the background video element is available on any plan for free!
Great video, fun, direct and to the point.
Great job.!!
Thanks so much Luis!
Awesome video but half of my video has cut out..
Please how can my video fit into a size of 80vh on the base point?
Hey Tochi, make sure whatever your video is in has set dimensions. For example it could be 100vw to take up the whole width of the screen. And then make your video width 100% so it absorbs the width of its parent container. Or if it's not inside anything, just give your video element a max-width of 100% or 100vw. Hope that helps!
Thanks for the video - helpful
No problem Jacob, glad it was helpful!
Why is it no one talks about mobile? Have you been able to get your background video to play on mobile? I can't figure it out. Thank you!
Hey there! The background video plays for me on mobile iPhone just fine, I tried it both on Chrome and Safari. Try checking if battery saver mode is enabled on your phone, I've read sometimes that prevents it from playing. You can also try clearing the cache or cookies. And if none of that works it seems like someone found a little custom code solution you can add in your Webflow project here: discourse.webflow.com/t/make-webflows-background-video-play-on-ios-and-android/52028
BEE MOVIE SHOUTOUT LETS GOOOO
HOW COULD I NOT?? 😂
This is so fun! I just love it.
It was so fun making it!! 😁
EXACTLY what I was looking for! Thank You!!
So glad to hear that!
Thanks for this. When I overlay text, heading its underlined. All text decorations are off.
Hmm try targeting the parent elements as well. If it's in a link block or something that underlined behavior will trickle down. So just check them all for that "text decoration: none" to be applied!
@@CullenKuch thank you, will check.
@@CullenKuch That was it, on a parent element. Fixed.
@@stevecahill9106 Fantastic!
I'm looking to add a background video that exceed's Webflow's 30mb upload limit because...it looks like garbage. Any way to do this?
Hey there! It may just come down to finding a good file compressor to make sure your video is within the size limit. There are two sites that seem to be popular for Webflow video compression - Clipchamp or HandBrake. You could also shorten your video and have it play in a loop, it is just background and shouldn't be some long extravagant or distracting element. If the quality is not the best you could always add a low opacity overlay or text content on top so the focus is shifted or the lower quality isn't as noticeable. Hope that helps!
Do you know how to setup the videos so they can 1. Start to play only when they are in view 2. Start at a particular time in the video (for mobile I want it to start at 15 seconds and not from the beginning)
Hey Derrek! In order to have it play only when in view, this would require some custom code I think. You could turn off the autoplay of the element in its settings. Then turn the play/pause button on. Then you'd have to write a little function that "clicks" the play/pause button when the bg video element is in view.
And to have mobile videos start further along you'd probably have to "display none" the desktop video on mobile, then display a different bg video element with a different file that starts when you want it. Hope that helps!
Hi! Thanks for the video. Could you please help me to make the header on the background video? So that, video will play while the header will be on the top of video (overpayed).
Hey Mila, you should be able to change the z-index for your heading and background video element in the position settings. Make sure the video has a lower z-index than the header and it will live behind it!
@@CullenKuch Thank you a lot! Now it works, but unfortunately now I can`t add an overlay on my video background
:( Maybe you know how I could fix it? I made everytning according to your video...
@@milabugaieva8451 Hmm okay so you would have your section with a fixed height, say 70vh. Then put the background video element inside that section, make its height 100%. Then with the background video element selected, click the background + button and add the color overlay. It should apply right over it. Then your headings and whatever you want on top of the video will live nested inside the background video element itself, just like a div. Hope that helps!
Thats great and all but background vids arnt interactive only youtube vids are which brings me to my next question , where is the loop feature for youtube vids???
Yes the background video element is meant to just be moving imagery as a background so it's not interactive. Only the video element will have the controls. You may be able to use an iFrame embed element in some custom code and add the autoplay or loop settings to that. Finsweet also just released an auto video attribute, might not be the same thing but could be worth looking into!
Is it possible to put the background video on Loop?
Hey Omna, yes the video should loop automatically!
How can we mask video inside the text or SVG?
Hey Morteza, looks like someone found a way to cheat this using blending modes and element positioning! webflow.com/made-in-webflow/website/Knockout-Text-with-Video-Background
Do you have a solution for background music for the background video?
Hey Abishay, I actually touched upon this in another video. You’ll have to add a separate audio controller and just try to sync it up with the background video by having them both play upon page load. Take a look here, hope it helps! ruclips.net/video/RCAsjcw4Qxo/видео.html
@@CullenKuch thank you sooo much❤️
I wondered if you could show how to use an embedded video as a background element. Love the channel BTW. New here and just subbed
Thanks Dom! It's pretty simple using the embed element. You can put an HTML embed element into a container or section that is 100vh/vw or the dimensions that you want. Then set your inline styling for the element in the custom code to 100% height and width so it absorbs the same styling dimensions. You just have to link a vimeo file or wherever the video is living. Here's an example I saw somebody do that you can explore! webflow.com/website/background-video-embed
Hi Cullen, great video and content! I was wondering if you know how to add some custom code to the background video elements.
Specifically to force the video to autoplay and mute and loop. I don't encounter any issue on androids and firefox and chrome, but on safari and iphone the background video will not play only with the options set in webflow of autoplay and loop. What I would like to add is something like , if that would be an html attribute. but didnt figure out how to do that in here. Thanks a lot!
Hi! So mine seems to work on iPhone and Safari mobile when I have the background video element settings set to autoplay and loop. It plays right upon page load. But if yours still doesn't here is some code that might help trigger it. Make sure you give your background video element an ID in Webflow, as well as the play/pause btn they provide for you. This code will check whether or not the video is already playing when the page loads. If it is not, then it will click the play button for the user so it looks like it autoplays. Make sure you have those IDs set and paste the code in the page settings. Here is a link to the JavaScript but it's also set up in my cloneable project linked above which might be more helpful. Good luck! codepen.io/cullenk/pen/VwXXORV
Sloooooow down bro! And shorten intro please!
Haha sorry Andrè, I'll keep that in mind for future videos!
how to responsive in mobile, because in my case is cut off
Hey Ryandi! The actual background video element won't scale with smaller screens so sometimes your content in the video might be cut off so it maintains the full background dimensions. One solution is to crop your video for the different sizes and have a different file for each one. Then have a different background video element for each viewport size. Display "none" the element when it's not being used and display the correct size video on the corresponding viewport. Hope that helps!
how to make infinite slider video
Hey Ani, I'll have to add this to my list. Webflow does have an option in any Slider element's settings to turn on "infinite repeat slides" though so you can always start there or check out their documentation on Sliders. university.webflow.com/lesson/slider
dude you're going too fast. I had to triple check that you had to go all the way down to components section in the sidebar to choose background video. Slow down.
Sorry about that - I’ll try to be aware of that in future videos. If you feel like you missed anything feel free to clone the project or look at in Webflow directly to copy at your own pace!