Eigenes Popup in Webflow bauen und animieren

In diesem Webflow Tutorial bauen und animieren wir ein eigenes Popup Fenster, welches sich bei Klick auf einen Button über die Seite legt. Auch bekannt als Modal Window oder Overlay. In das Popup kannst du quasi alles rein packen was du willst. Texte, Bilder, Newsletter Forms etc. Sobald die Höhe des Browserfensters kleiner als der Content wird, ist der Inhalt automatisch vertikal scrollbar.

Sobald das Popup geöffnet ist, wird das Scrollen der gesamten Seite mit Hilfe von Custom Code unterbunden (body = overflow hidden). Das hilft längeren Inhalt in dem Popup Overlay angenehmer zu scrollen ohne aus Versehen die ganze Seite zu scrollen.

Im nächsten Video zeige ich dir, wie du mit dem gleichen Aufbau ein YouTube Video integrieren kannst, welches automatisch von deinem Cookie Script blockiert werden kann.

Eigenes YouTube Video Popup in Webflow erstellen (und mit Cookie Script blockieren)

In diesem Tutorial zeige ich dir, wie du in Webflow ein Popup mit einem YouTube Video baust, welches automatisch von Cookie Script blockiert werden kann und auch automatisch aufhört zu spielen, wenn das Popup wieder geschlossen wird. Den gleichen Aufbau kannst du auch für Vimeo Videos oder HTML eingebettete Videos nutzen.

Da die Standard-Webflow Video Komponente leider nicht automatisch von Cookie Script blockiert werden kann, habe ich mir dieses eigene Video-Popup in Webflow gebaut, um es auf meiner Webflow Onlinekurs Seite zu integrieren.

Für das Video Popup ist zusätzlich eigener jQuery Code nötig, um das Video bei Klick auf den Schließen-Button zu stoppen und nicht im Hintergrund weiter laufen zu lassen. Diesen findest du in den Seiteneinstellungen.

Komplette Anleitung wie Cookie-Script mit Webflow funktioniert:
https://www.jonasarleth.com/blog/dsgvo-cookie-banner-in-webflow-integrieren-cookie-scrip