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

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

Something in the pipe line but couldn't resit getting it on my showcase early. 

This video player is entirely customisable within the designer, it uses interactions for hiding and displaying the controls. All of which can be customised to your liking, I'll be releasing some documentation with the full release for the time being comment with any questions.  

Change Log
------------
15 July 2021 - Beta Release
26 May 2022 - Updated placeholder video URL as previous one was removed.

To Do List
----------

Hoping to publish the next update in June with a first release in July. 

- Implement timeline scrubber
- Fix mini mode
- Code checks to allow missing controls. 
- Add additional themes

Custom Video Controls

Custom Video Player

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

Another collaboration with my favourite video photographer. We started to work on this site for educational purpose and we fell in love in the concept. 

Comment if you think we should develop it into a personal stock footage store.

Follow Ilya on instagram
https://www.instagram.com/ilyalisi/

Tutorial & Assets:

Html5 Video Player
https://www.youtube.com/watch?v=yx-HYerClEA

Page view count
https://countapi.xyz/

Like Button
https://likebtn.com/en/

Icons
https://ionicons.com/

Video Player

Custom video player for personal stock footage

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

Create a stylish Video Player in Webflow. Customize each single part of the player to make it unique, remove and add the elements you want. Enjoy absolute design freedom. To have this tool working you need to enter a code in your Webflow project. You’ll find that code in the pdf (with a guide about the configuration steps) you’re going to download after the payment.

Webflow Video Player Cloneable

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

Hi my gorgeous friends of Webflow,

This project plays a bit with YouTube APIs, window scroll event, and - of course - the beauty and power of Webflow interactions to create a horizontal scroll animation where videos are automatically played or paused on scroll.

Also delayed the play function a bit to add an intro animation to each video by mixing the horizontal scrolling with simple scroll into view interactions.

The page load animation is a bonus. 😊

Shoutout to "The First Take" (https://www.youtube.com/channel/UC9zY_E8mcAo_Oq772LEZq8Q/videos), where you can find all the Japanese singers and bands that I love. 😁

Enjoy, clone, and feel free to leave a comment!

Have an awesome Webflow journey y'all,
Francesco

P.S. Feel free to visit my YouTube channel:
https://www.youtube.com/@francescocastronuovo

Automatically Play Videos on Horizontal Scroll

Automatically Play Videos On Horizontal Scroll

Webflow University

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 project shows how you can play and pause videos on click for Vimeo, YouTube, and Wistia! Now you can play and pause videos on events like modal open and close. 

Discover video play websites built by the Webflow community

Discover video play websites built by the Webflow community