Build and Animate a Custom Popup in Webflow

In this Webflow tutorial, we build and animate our own popup window, which appears over the page when you click on a button. Also known as modal window or overlay. You can put just about anything you want in the popup. Texts, images, newsletter forms, etc. As soon as the height of the browser window becomes smaller than the content, the content is automatically scrollable vertically.

As soon as the popup is opened, the entire page is prevented from scrolling using custom code (body = overflow hidden). This helps longer content in the popup overlay to scroll more comfortably without accidentally scrolling the entire page.

In the next video, I'll show you how you can integrate a YouTube video with the same structure, which can be automatically blocked by your cookie script.

Create your own YouTube video popup in Webflow (and block it with cookie script)

In this tutorial, I'll show you how to build a popup with a YouTube video in Webflow, which can be automatically blocked by Cookie Script and also automatically stops playing when the popup is closed again. You can also use the same structure for Vimeo videos or HTML embedded videos.

Since the standard Webflow video component unfortunately cannot be automatically blocked by Cookie Script, I built this own video popup in Webflow to integrate it into my Webflow online course page.

The video popup also requires your own jQuery code to stop the video when you click on the close button and not let it continue running in the background. You can find this in the page settings.

Complete guide to how cookie script works with Webflow:
https://www.jonasarleth.com/blog/dsgvo-cookie-banner-in-webflow-integrieren-cookie-scrip