Video stoppen wenn Avada Modal geschlossen wird

Inhaltsverzeichnis

Das Avada Theme bietet mit dem Pagebuilder Element „Modal Popup“ eine schicke Funktion um Elemente auf einer Seite auf Klick in einem PopUp Modal (nicht in einem eigenen Fenster) zu öffnen.

In das Modal können Texte, Bilder etc. via Texteditor eingebunden werden.

modal popup avada

 

Für ein Kundenprojekt wollte ich die Modal Funktion nutzen um hier verschiedene Produktvideos anzuzeigen. Standardmäßig würde sich ein solches Video als neues Tab öffnen und da ist so ein PopUp doch weitaus eleganter.
Der Einbau war schnell umgesetzt doch nun stellte ich fest dass wenn das Video gestartet war und man das PopUp schließt, das Video munter weiter lief. Um dieses nachträglich zu beenden musste man das PopUp erneut öffnen und hier das Video stoppen.

Hier eine kurze Anleitung wie ihr diesen Umstand beim Avada Theme ändern könnt.

1. Das anzuzeigende Video wird über Add Media > Video hochladen in eure Mediathek geladen und anschließend in der Seite/Modal eingefügt
2. wechselt in die Avada Theme Einstellungen Avada > Theme Options > Advanced
Hier fügt ihr den folgenden Code in dem Feld bei “Space before ein:

<script>
jQuery( document ).ready(function() {
jQuery(document).on('hide.bs.modal','.fusion-modal', function () {
jQuery(".fusion-modal .mejs-video").each(function() {
jQuery(this).find('.mejs-playpause-button button').trigger('click');
});
});
});
</script>

 

et voilà – wenn ihr nun ein Video im Popup Modal startet und das Fenster schließt, stoppt auch automatisch das Video.

Christian Pust
WordPress & Onlinemarketing Experte mit über 15 Jahren Erfahrung. Entwickler & CEO von Trackboxx – der Google Analytics Alternative.

5 Antworten

  1. Dieses Problem taucht bei mir im Avada Theme auch gerade auf. Muss man den Code denn bei Space before oder Space before einsetzen? Oder bei beiden? Habe es so oder so probiert, aber das Video stoppt leider immer noch nicht 🙁
    LG
    Sylvia

    1. Hi Silvia, der Code sollte bei “Space before oder wenn das Avada Deutsch eingestellt ist “Leerzeichen vor
      eingesetzt werden.

      1. Hallo Christian, ich meinte Space before head oder body. Aber im Video setzt du es ja nur bei head ein. Habe ich auch gemacht. Aber trotzdem stoppt mein Video nicht. Ich habe den Code per copy&paste eingesetzt. Woran kann es nur liegen?

        1. Also unabhängig das ich ohne URL sowieso nichts sagen kann, gebe ich auch grundsätzlich immer die Info dass dies hier ein Blog ist und wir hier natürlich keine individuelle Betreuung bieten. Solltest du hier Hilfe benötigen kann ich dir unsere ganz normale Leistung als Agentur anbieten und mir das Problem dann ansehen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Das könnte dich auch interessieren

Du benötigst Unterstützung bei deinem WordPress Projekt?

Dein Ansprechpartner
Christian