Video stoppen wenn Avada Modal geschlossen wird

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.

 

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.

Wie fandest du diesen Artikel?

0/5 (0 Reviews)

Christian
Christian
Mein Name ist Christian und ich bin Mitgründer der Plattform fastWP. Hier im Magazin bin ich für die eher "technisch" lastigen Themen zuständig aber schreibe gerne über das Thema SEO, das nun bereits seit über 10 Jahren zu meiner Leidenschaft gehört.

1 KOMMENTAR

  1. vielen Dank für diesen Tipp. Ihr glaubt gar nicht wie lange ich versucht habe dieses Problem zu lösen! fastWP ihr seit mega!!

HINTERLASSEN SIE EINE ANTWORT

Please enter your comment!
Please enter your name here

fastWP

Finde den passenden WordPress Dienstleister in deiner Region!

Deine Werbung hier?

Nutze die Reichweite von fastWP und erreiche deine Zielgruppe!

weiter zu Raidboxes