Video Playback in einem Popup bei schließen stoppen

Dieser Code stoppt automatisch das weitere abspielen eines Videos in einem Popup / Modal Fenster, sobald dieses geschlossen wird.

Video Playback in einem Popup bei schließen stoppen
Code-Vorlage
Demo Beispiel enthalten
Mit Text-Anleitung
Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?
Vorschau

Vorteile dieser Vode-Vorlage:

  1. Verbesserte Benutzererfahrung: Der Code sorgt für eine reibungslose und intuitive Benutzererfahrung. Wenn Besucher ein Video in einem Popup- oder Modal-Fenster ansehen und dieses schließen, wird das Video automatisch gestoppt. Dies verhindert, dass der Ton des Videos nach dem Schließen des Popups weiter abgespielt wird, was oft als störend empfunden wird.
  2. Professionelles Erscheinungsbild: Das automatische Stoppen von Videos, wenn sie nicht mehr sichtbar sind, verleiht deiner Website ein professionelles Erscheinungsbild. Dies zeigt, dass du auf Details achtest und die Nutzerfreundlichkeit im Blick hast.
  3. Reduzierte Netzwerkbelastung: Das automatische Stoppen von Videos reduziert die Netzwerkbelastung und die Datenübertragung, da die Videos nur dann abgespielt werden, wenn sie tatsächlich im sichtbaren Bereich des Benutzers sind. Dies kann die Ladezeit deiner Website verkürzen und die Bandbreitennutzung reduzieren.
  4. Einfache Implementierung: Der Code kann mithilfe von nur zwei Attributen in deinem Webflow-Projekt eingebunden werden. Dies bedeutet, dass keine aufwendige Codierung erforderlich ist, und die Implementierung ist benutzerfreundlich.
  5. Anwendbarkeit: Dieser Code ist vielseitig und kann auf Websites angewendet werden, die Videos in Popup-Fenstern oder Modalansichten verwenden. Dies ist besonders nützlich für Websites, die Videoinhalte in Form von Tutorials, Präsentationen oder anderen Multimedia-Elementen präsentieren.

Zusammenfassend trägt dieser Code wesentlich zur Verbesserung der Benutzererfahrung und zur Professionalität deiner Website bei. Die Implementierung ist unkompliziert und erfordert keine fortgeschrittenen technischen Kenntnisse, was ihn zu einer praktischen Lösung für Webflow-Projekte macht.

Diesen Trick und 43 weitere im Bundle kaufen
Für 49 € freischalten
Was ist enthalten?

Weitere nützliche Webflow Tricks

Hunderte Device Mockups mit Menschen schnell kostenlos erstellen
Freischalten
Hunderte Device Mockups mit Menschen schnell kostenlos erstellen

Falls man für eine Präsentation oder zum einbinden auf der Website mal ein schnelles Mockup braucht (kostenlos). Einfach Screenshot hochladen und High-Res Bild wieder runterladen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen
Highlight
Freischalten
Einmalig ein Info-Banner (Notification Bar) auf der Website anzeigen

Sobald der Seitenbesucher den Info-Banner weggeklickt, wird er beim nächsten Laden der Website nicht mehr angezeigt, da die Entscheidung mit einem Cookie gespeichert wird. Über Attribute editierbar und ohne externe JS Library.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Kleine Kreise und Rechtecke willkürlich auf der Website verteilen (Effekt)
Freischalten
Kleine Kreise und Rechtecke willkürlich auf der Website verteilen (Effekt)

Ein kreativer Effekt, der auch auf der Webflow Conf Website 2022 angewendet wurde. Die Elemente verschwinden automatisch on hover und tauchen wo anders wieder auf.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Mehrere 303 Redirects in Webflow auf einmal anlegen (CSV Upload)
Freischalten
Mehrere 303 Redirects in Webflow auf einmal anlegen (CSV Upload)

Mehrere 303 Redirects in Webflow auf einmal via CSV Upload hochladen.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
Lazy Loading Background Videos in Webflow
Highlight
Freischalten
Lazy Loading Background Videos in Webflow

Viele Background Videos auf einer Website führen zu einer hohen Netzwerknutzlast und schlechteren Page-Speed Score. Dieser Code hilft dir dabei, Videos erst zu laden, sobald sie im Viewport des Seitenbesuchers sind.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Erstes FAQ Accordion standardmäßig geöffnet anzeigen
Freischalten
Erstes FAQ Accordion standardmäßig geöffnet anzeigen

Zeige beim laden einer Seite das erste Element einer FAQ Liste standardmäßig geöffnet an.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Overflow auto (horizontal scrollen) mit vor und zurück Button
Highlight
Freischalten
Overflow auto (horizontal scrollen) mit vor und zurück Button

Wenn du mit horizontal scrollbaren Sektionen arbeitest, solltest du vorwärts und rückwärts Button hinzufügen, die der User als Backup klicken kann, da nicht jede Maus horizontal scrollen kann.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webdesign Galerie mit ganzen Screenshots – Landbook
Kostenlos
Freischalten
Webdesign Galerie mit ganzen Screenshots – Landbook

Jeder Screenshot beinhaltet eine ganze Website-Seite und nicht nur einen Ausschnitt. Zudem gibt es gute Filtermöglichkeiten.

Inspiration
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Lightbox Schließen-Button stylen
Freischalten
Webflow Lightbox Schließen-Button stylen

Dieser CSS Code überschreibt das Standard-Design von Webflow, welches jedem Lightbox-Schließen-Button mitgegeben wird. Du kannst es mit deinem eigenen Icon versehen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Kostenlose Bilder und Videos für Kundenprojekte – meine Quellen (kommerzielle Zwecke)
Freischalten
Kostenlose Bilder und Videos für Kundenprojekte – meine Quellen (kommerzielle Zwecke)

Liste an Plattformen für kostenloses Bild- und Videomaterialien. Nutze ich als Webdesigner bei jedem Kundenauftrag.

Tool
Text-Anleitung
Demo Beispiel
Video-Anleitung
SVG Code Zeichenlimit für Embed Felder in Webflow umgehen
Freischalten
SVG Code Zeichenlimit für Embed Felder in Webflow umgehen

Umgehe das 10.000 Zeichen Limit für Webflow Embed Fields und füge große SVG Bilder als Code zu deiner Website hinzu.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung
Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern
Freischalten
Webflow Lightbox Hack: Gruppen-Slugs per JavaScript steuern

Ein Trick, der dir zeigt, wie du in Webflow mehrere unabhängige Lightbox-Galerien mit dynamischen CMS-Gruppennamen erstellst, ohne dass sie sich in einer Gruppe öffnen.

Code-Vorlage
Text-Anleitung
Demo Beispiel
Video-Anleitung