The Top 28 Video Webflow cloneables

Here's an easy way to create a masked video in text in Webflow. No custom code is required. This was created with an SVG file and added interactions to zoom in while scrolling.

A full page background video hero section design in Webflow. An easy way to integrate a background video hero section in your Webflow projects with unique button interactions, and a scroll indicator.

Here's a way of adding custom popup modals for video and content to your Webflow site. These custom content modals utilize custom code to disable scrolling when the pop up modal window is open. This helps prevent user confusion and scrolling of the site when these modal windows are open. For the video popup additional jQuery code is utilized to stop the video from running in the background when the window has been closed.

A unique GSAP Webflow cloneable in which items expand on hover with a unique transition. In this example there are three vertical columns, when hovering over one of them it expands it into view and closes the other opened vertical column. This is accomplished via GSAP & Flip.js which can be found in the custom code section of the page settings. The code is customizable to target different classes and then adds or removes a class to those other classes. Flip allows you to customize the duration and the easing. In this demonstration there are three videos and three tab divs. Do not get confused that these are normal Webflow tabs as these are just the names of the div. Be sure to check out this use case of using GSAP, Flip.js and Webflow together to create a unique interaction.

A unique demonstration of using GSAP Flip & Scrolltrigger to move a video around the page based on the users page scroll in Webflow. As the user scrolls down the page the video transforms and moves in different locations on the page. It grows, rotates, and shifts locations, becoming the background of a section, moving to the right of a card and following the user throughout the navigation throughout the site. This method requires the custom code found within the custom code section in page settings. Utilizing GSAP, Flip.js and Scrolltrigger.js you can customize the locations and targets based on element IDs. Be sure to check the page design as well since there are custom CSS HTML embeds found on the page as well.

Here's a way to use CMS video backgrounds with Webflow that fit the entire container. This works with Webflow's own compressions, as well as mp4 and webm. The background videos are via lazyload and will only load on scroll.

A responsive, full-screen, Vimeo video embed in the background of the site on Webflow. Please note that you need to visit Webflow's cloneable page of this item to preview it. Change out the video link in the video-embed element nested in the video-wrap div.

Add a Vimeo video to the background of your Webflow site with this cloneable. This allows you to run the video as a loop in the background. If you click on the unmute button the video will play from the beginning and the sound will become activated. This allows you to add Vimeo videos to your sites with better flexibility and increased usability. This requires a bit of custom jQuery code and the Vimeo API must be included if you want to utilize Vimeo iFrames. You can find the jQuery and relevant code within the custom code settings of the page. Take note that this also utilizes data attributes and Webflow interactions to work properly.

A unique way to show a video play button via the mouse/hover over in Webflow. A fun way to add a dynamic play button to your videos in Webflow. When someone hovers over the video a play button appears to follow the mouse cursor and offers a few different rotate states depending upon where the mouse is located over the video. This technique uses a few different native Webflow interactions for the mouse cursor to appear and the rotate effect. This uses 100% native Webflow interactions and does not require any extra code. Tutorial can be found on Youtube here: https://youtu.be/ySUF-D9LxjE

A unique way of adding a CMS driven draggable slider to Webflow with background videos playing on hover.

Here's a technique to autoplay videos on horizontal scroll in Webflow. Using the power of Youtube APIs, window scroll events and the power of Webflow interactions you're able to now create horizontal scroll animations in which videos are automatically played or paused on scroll events. There's also a delay on the play function to add a bit of an intro animation to each video by mixing the scroll into view interactions.

Add a pause/play button to your sites background video in Webflow.

Here are quite a few, well designed UI layouts for video cards and elements for video sections. You'll find hero sections, grids for video blogs, play button animations, and pop-up modals for videos for your Webflow site.

I wanted to see if I could rebuild this beautiful website. All interactions are created in Webflow :) Custom code used to create infinite scroll. Current limitations (stretch goals to fulfil at a later date): 1) Sound effects 2) Text changing effect Rebuild of https://one-is.com

A unique, fancy background hero with text masking effect over a background autoplay video.

A great way of displaying videos within a mobile iPhone mockup. You can design the story layout and upload multiple videos into one mobile frame.

Here's a way of adding video on hover to your Webflow cards. Using basic hover interactions you can create customized cards that play video on hover over on your Webflow site.

Here's an example of a menu with a slide in interaction and that features a background video for the menu. A fun interaction that adds some depth and liveliness to your Webflow site.

Stop those pesky videos from playing in the background when the modal or popup has been closed by the user. Apply this to your sites body code and view the instructions in the following loom video: https://www.loom.com/share/ae76cd611f604de5af8cffea8b25efa3

A very fun way of adding a backlight effect to Youtube video embeds on your site. This currently works in Chrome and Firefox and needs a bit more tweaking to fully work in Safari. This works via native interactions and some custom code. Easy to integrate and get working on your site.

Want to liven up the videos on your Webflow site? With this cloneable you'll be able to feature three, full page videos with a unique animation effect. Perfect for portfolio pages, heros or pages that you need to feature more than one video in a dynamic and interactive way.

A conference/event hero section design for Webflow. Features illustrative cards for daily event schedule, a get notified form opt in, video lightbox and menu/nav bar.

Here's a text masking over a video effect in Webflow. This cloneable demonstrates a technique to allow you to clip a background video using text as the screened blending mode. There's also a demonstration using an image rather than a video.

Nine different video play button animations ready to be cloned to your Webflow site. This allows you to add dimensions and CTA's to your videos on your Webflow site.

A unique menu/navigation video hover effect in Webflow. When hovering over a menu item the text enlarges and scrolls a larger description while playing a background video. A way to customize your menu and add stunning animations and interactions to Webflow.

Here's a way to create a CMS driven slider with a lightbox and video modal in Webflow. This slider utilizes Slick slider for the slider effects. Please note that this uses custom code of both CSS and script for the slider.

Here's a technique to display multiple video popup modals in Webflow and have the videos pause on close. Please note that in order for this to work you'll need to utilize the custom script found in the body close tags. These are tied to the class names of the cloneable so you'll need to customize the classes if you add, remove or copy the code from the cloneable.

A simple method to create video explainer tour widget in Webflow. You'll need to view the live site in order to test the experience. This method allows for a way to embed a video into projects to help create an explainer video.