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

Once the popup is open, scrolling of the entire page is disabled using custom code (body = overflow hidden). This helps longer content in the popup overlay to scroll more comfortably without accidentally scrolling the whole page. For the video popup, additional custom jQuery code is needed to stop the video from running in the background when the close button is clicked.

Tutorial: https://youtu.be/JbNtDkrfH0U

Custom Content and Video Popup / Modal

Hii Everyone , I want to show you some cool stuff !!

This is a Netflix kind of theme made in webflow , the fun part is, It is having CMS build inside a Popup , when u click on a movie/trailer, you will se different popup for all !

Clone it and make it yours !

Thanks

Hire Me : kingfactory1234@gmail.com

Netflix Made in Webflow

netflixtheme

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

Sliders are the most attractive feature on any website, and flip sliders are the most beautiful and usable. Add Carousel to your websites using ZealousWeb’s Flip Slider WebFlow component to enhance your website’s UI and UX.

We have created the most aesthetically pleasing, stylish, and powerful WebFlow Flip Slider component for you. ZealousWeb’s flip slider is easy to use with its dynamic architecture, enabling you to adjust the Carousel setting from the setting menu under the Flip Box. 
Once installed and Activated, click go to Flip Box, and add one or more Flip Box items. The Flip Slider WebFlow component allows you to add images, texts, links, and the option to select different colors for the flip box buttons. Additionally, you can add more than one Carousel on the same page by creating different categories.


Zeal Flip Slider

Flip Slider

The project was made to help a forum question about using the pulse button to trigger a popup with Wistia video.

Pulsing play button custom popup

Pulsing play button popup

Losing traffic due to cumbersome tab-toggling on mobile devices? The ‘Responsive Tap’ component for Webflow enables you to create powerful tabs and seamlessly manage the tab menu and content.

This clonable component allows you to create tabbed content for your website with full responsiveness that is both appealing and user-friendly on all devices. The responsive tab modules appear horizontally and vertically, making the tab content more accessible and maximizing the mobile-friendliness of your Webflow website. 

We have designed this component to eliminate the hassle of clicking on the tab title and scrolling to the bottom to access the tab’s content. Our component displays the tab content under its title tab in an accordion format.

Responsive Tabs

Custom Responsive Tabs

Prevent them pesky videos from playing in the background when the containing module (or pop up) has been closed by the user.

To apply this to your site see the body code for the script and instructions, I've also provided the instructions in the loom video below.

https://www.loom.com/share/ae76cd611f604de5af8cffea8b25efa3

Stop Pop Up Video On Close

Stop video when pop up closed

Hi my gorgeous friends of Webflow,

By playing a bit with jQuery and by using attributes to avoid the need for class matching, you can create a responsive CMS video player for your Webflow project.

Check for the instruction popup! 😊

Have an awesome Webflow journey y'all,
Francesco

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

Responsive CMS Video Player

The ‘Video autoplay and dynamic time’ component for Webflow simplifies embedding videos from popular video hosting platforms like Youtube and Vimeo in a responsive design. Our user-friendly Webflow video clonable component lets you showcase your self-hosted and externally hosted videos using direct links. 

The default video setting includes autoplay on a pop-up after you click on a video link. This Webflow component displays the timeframe for the video directly in the corner of your video’s thumbnail.

The component integrates conveniently with most browsers without any compatibility issues and the need for any third-party tools. Add it to your Webflow website for an unparalleled user-friendly experience. 

Video autoplay with timer

Video Autoplay in Popup

Timer Slider is a WebFlow component that enables you to create beautiful and responsive sliders. It has stunning features that can help take your website to the next level. 

ZealousWeb’s Timer Slider component has navigation bullet points with time animation. The slides will rotate on bullet points and click events. The sliders rotate once the bullet points navigation animation is completed.

Timer Slider

Timer-slider

Display multiple video popups/modals that pause the Webflow video element when the modal is closed.

Open 'Live site' to view.

Multiple Video Modals on Single Page (Pause on Close)

A transformational leader, Kandarp Bhatt is the Founder and CEO of ZealousWeb, a full-service web marketing offering end-to-end digital solutions to businesses worldwide across industry verticals.
one of his primary objectives is to transform executives and people with entrepreneurial mindsets in his team into high-impact leaders and performers. The website is developed using a customized theme that balances the interface with a beautiful user experience. It includes a brief of his different phases of life. Kandarp Bhatt started his business voyage by offering digital marketing services with his Brother-in-law, Vishal Bhatt - CFO of Zealous Web.


KandarpBhatt.com

Kandarp Bhatt - A transformational leader

Our Timer Counter component allows website owners to create customizable and functional timers just in a few minutes. This dynamic WebFlow content is the best way to develop alluring timers for your users.

This component is easy to use, where all you need to do is add the specific date and time using WebFlow’s calendar icon. Alternatively, you can add the date and time in the format MM/DD/YYYY 07:00 AM.

Once the date and time have been keyed in, the timer section displays the countdown time according to the entered data. The Timer Counter component eliminates the need to add a time zone and automatically fetches it, making the creation of countdowns and timers seamless.

You can use our component in your website to instill a sense of urgency and nudge users to finalize purchases quickly. Display the countdown time to webinars and events you host on your website using the Timer Counter component. All this and more without the need for any coding knowledge? Yes Please! 

Time Counter

A rush website design job, I designed and built this site in less than 12 hours for a team that serves corporate events, prison ministries, and spiritual support for men. Site includes custom branded video tools, video CDN, animation, blog migrated from existing site, chat, and chatbot functionality.

Riding High Ministries

Ground Shakers by Riding High Ministries

Example of a popup modal that includes a responsive iframe Youtube video. The video is initially set to autoplay and volume is set to mute (better UX). When the modal is closed, the video will stop playing, so the sound doesn't continue to play in the background. Refresh the page to show the popup modal again.

If you'd like to have the sound play when modal is opened, remove "&mute=1" from the Youtube embed src path. 

This cloneable project was created based on the work posted by @Tony_Jones (https://discourse.webflow.com/t/stop-playing-youtube-video-when-modal-is-closed/70752) and cloneable popup modal project provided by @herzo (https://webflow.com/website/Pop-up-on-Page-Load). 

Hope this cloneable project will help with your project as well.

Cloneable - Popup Modal Responsive Youtube Video Stop Audio When Closed

[Cloneable] Responsive Popup Youtube Video Stop When Closed

Huddle Digital Marketing delivers a measurable return in digital marketing strategies comprehending Social Media, SEO, Paid Media, and Digital Branding. The website is developed using Webflow CMS suppressing a customized theme that balances the interface with a beautiful user experience and has also been recognized for its efforts by leaders in the digital world. Easy navigation through the site, uncomplicated interface, and option to look company’s portfolio. Users can request a quote and have a conversation with the sales team.

Huddle - Digital Marketing Agency

Huddle Digital Marketing Agency

Jetpro Healthcare offers the best products to clients across the globe enhancing health care by providing top-quality products like face masks, gloves, sanitizers, medical furniture, and many more. With the growing need of appropriate and high-quality hygiene and protective items for the healthcare industry. Creating a platform purpose-built for today’s intensify healthcare industry puts their customers a step ahead of tomorrow which includes the experts and leaders from healthcare industries. It builds strong businesses with loyal customers that solve a real market need, much as in other legacy industries. The website offers its clients a clean and controlled environment for all the contents.

Jetpro Healthcare

TradeLeads Marketing Engine combines a special blend of paid advertising, local SEO, and email marketing techniques and builds a steady stream of qualified leads in the required time. With great user experience, TradeLeads offers complete end-to-end marketing, sales, and customer management solutions for their clients. Partnering with the global digital agency ZealousWeb, maintains the business. With a fully functional admin control panel, it becomes easy for the sales team to manage the calls of the clients.

Discover video popup websites built by the Webflow community

Discover video popup websites built by the Webflow community