Discover the best background-video websites created by professional designers. Get inspired and start planning your perfect background-video web design today!

This is another one pager, but this time in the typical style of a design agency. It features quite a few interactions and animations and a bit of custom Javascript & CSS for the cursor etc.

The background video is a free-to-use download from https://coverr.co, and all images comes from unsplash. The little hamburger menu lottie animation & pre loader is created by Finsweet's Lottieflow, check them out!

If you're an agency (or someone looking for a freelancer), please hire me for the summer lmao 🤙

(No but for real hehe, feel free to email me if you need some work done for one off projects or for a few months around May - September: robin.granqvist@hotmail.se)

https://twitter.com/robingranqvist_
https://instagram.com/robingranqvist_
https://dribbble.com/robingranqvist

robin.granqvist@hotmail.se 🤙

Imaginary

Imaginary - A free Agency Style Template

A 3D scroll animation that lets you slowly rotate a tablet towards the viewer while scrolling. You can even use animated videos instead of a static image. I use this setup in one of my case studies in my portfolio.

Watch the Tutorial: 
https://youtu.be/yX_KhCuMx_Q

3D Tablet Scroll Animation | Free Template

3D Tablet Scroll Animation in Webflow | Free Template

A magnetic video play button that appears on hover on a background video and follows the mouse cursor. When clicked, it opens a lightbox with the video.

Tutorial: https://youtu.be/ySUF-D9LxjE

Magnetic Video Play Button on Hover

Magnetic Video Play Button following the Cursor

From my Webflow online course community came the wish to build this video player, which basically runs in a loop without sound as a background video. 
If you click on on the unmute button, the video plays from the beginning and the sound is activated.  

We need a bit of custom jQuery code for this. In addition, the Vimeo API must be included if you want to address Vimeo iFrames.

Watch the tutorial here: https://youtu.be/mKFZxHpYGng

Vimeo Background Video with Play Sound Toggle

Webflow University

This cloneable project shows blending mode, which is a great way to clip text clip out black and white content (such as text, borders, PNGs, SVGs, and more), so your content becomes a window to your background elements (this could be both a image or a video).

View the lesson here: https://university.webflow.com/lesson/clip-content-using-blending-modes

Blend modes overlay

Clipped Text with Blending modes | Webflow University

Monster

Monster Pet Food

As soon as the cursor moves over a row in the table, the background appears, which fills the table row from the center. At the same time an image is revealed for each line, which scrolls at a fixed position with the page and could provide a preview of the content. You can also insert a background video here. Discovered on this website: https://neodlx.io

I added an additional line of custom code so that the effect still takes place even if you hover the mouse over the image and there is a table row below it. The image is ignored by the mouse (pointer-events:none).

Tutorial: https://youtu.be/pYPV0g54CU8

Table Hover Animation with Image Preview

Table hover effect with image reveal

Webflow's background video component currently works only on desktop devices due to mobile restrictions on auto-playing video. These restrictions have been recently lifted. Inserting the snippet of code below will make background video work as intended on iOS and Android.

Works on iOS 10 and above  |  Android Lollipop (5.0) and above

Mobile Background Video

Make Background Video Work on iOS and Android

Most of the creative agencies face this issue of how to showcase their video production work. Well, worry no more and use this Cloneable Infinite Video Slider by Minimal Tweaks. It's totally made in Webflow without any custom code. You can edit it as per your need and as per your brand colors. Go ahead and clone it and start tweaking it :)

Feel free to reach out to us in case of any queries. 

minimal-tweaks-cloneable

[Cloneable] Infinite Video Slider

This native slider uses the CMS data and thanks to the fantastic Finsweet library (link below) it is possible to have greater management, even of animations. For more information on how to use it, see their documentation.

The stars are generated with a simple custom code based on the rating in the CMS.

To make the vertical label fit (taken from the CMS) I used Fitty (link below)

https://cmsdocs.webflow.io/slider
https://github.com/rikschennink/fitty

👋

Finsweet CMS Slider

ZealousWeb

The most lucrative feature of a website is the ability to play background video when users hover their mouse over it. Using ZealousWeb’s Background Video on Hover for Webflow creates a gallery of image thumbnails that will play video on hover.

The Background Video on Hover component supports lightbox mode, where you can view images and videos on a larger scale. Using this component, you can also play background videos on hover on mobile devices.

The Background Video on Hover component is a standard component primarily used in websites these days, showcasing your creativity and enhancing the customer experience. We have created a background video autoplay on hover. This component features a section where users can hover on a title, and it auto-plays the video in its background while displaying the title’s description.


Video Auto Play On Hover

Video Autoplay On Hover

This was my first attempt to build a site in Webflow and i am just blown away...

I studied communication design and had just a brief course in Screen-Webdesign & Coding. So i concidering myself as an amateur in this field. My learning curve was in the first 8 Weeks quite steep and i am thankful for the Webflow University. That helped a lot. My design degree was an advantage for me to understand the connections between basically every touchpoints in various disciplines. Video, Photo, Icons, Typography, Space, UX/UI etc... everything comes together at the end. 
I put everything i learned into my own portfolio/shop website and since then i learn everyday something new about Webflow. 

For us as an Agency, it opens a new opportunity to help people with their own Websites and we will continue to provide this service as an main feature.

byStark — Viktor Stark

byStark — Agency in the heart of the Alps

Hey Webflow Fam! 👋🏼

Worked a while on this cloneable and was finally able to release it! This sweet conversational user interface is a Webflow UI template that can be used to extend on longer interactive conversations. Currently, it has 2 layers, more can be added pretty easily as you will see in the Webflow Designer Preview.

✅ 100% CSS
✅ 100% Webflow Interactions
❌ Custom Code
🆓 Cloneable

Feel free to clone this and use it for your next project! ✨

👀 Need help learning Webflow? I offer Webflow coaching sessions where we step up your building game! More information here: 
https://www.cedric.design/coaching/webflow-coaching

🔥 Need a Webflow website? ✉️ hey@cedric.design

Conversational UI

Watch tutorial at https://www.patreon.com/posts/74730032
Check out the docs at https://github.com/sampotts/plyr

Plyr.io

Custom Video Player using Plyr.io

Better Mistakes

Hi everyone, this is a small exercise we were working on and decided to share.

We recreated one of Apple's sections where we have a video playing automatically with a play/pause icon.

This rebuild is for educational purposes only. Not affiliated with Apple in any way, all rights of the videos, images, logos, and text belong to Apple.

[Experiment] Background Video Play/Pause

[Experiment] Video Background Play and Pause Interaction

This is a cloneable project that has the custom code embedded that allows site visitors to toggle pause then play on selected background videos with the push of a button.

Background video shot and edited by: Miguel Amezquita

View the lesson here: https://university.webflow.com/lesson/toggle-pause-on-background-videos

Background video

Background video play/pause toggle

This demo showcases an open button interaction along with a menu that opens with a video in the background.

WebDev for You - Interaction #146

WebDev For You - Interaction #146

Memberstack

Happy Wednesday! 👋

I took some time to revise one of Pixer.io's open-source projects and added Memberstack to it. 🥳

This free webflow template is a modern landing page for a subscription business. The project includes beautiful photos, scroll interactions, several sections including a hero, getting started, mega navigation, interview section, testimonial, background videos, call to action, footer element, + a functionaly signup, login, and welcome page. 

Note: you could use this template with Memberstack's pre-built UI (the one you see in the template now) or you could link directly to your own custom signup form. Totally up to you.

If you have any questions, feel free to drop a comment below. Thanks!

Discover background video websites built by the Webflow community

Discover background video websites built by the Webflow community