Youtube Video in Modal Box. Ton läuft weiter nach schliessen

Hallo hallo. Das nächste Rätsel, dass ich gerne lösen wuerde. Ich möchte gerne ein Youtube Video in einem Modal Fenster abspielen. Das klappt auch soweit. Das Problem ist nur, dass der Ton des Videos in einigen Browsern nach dem Schliessen der Modalbox fröhlich weiterläuft. Firefox mit Win7 macht kein Problem. Firefox auf Android läuft der Ton weiter. Chrome unter Win7 auch. Die Modal Box wird ganz normal aufgerufen mit: [code]


[/code] Wobei unter http://www.meineseite.de/videogallery eine Custompage eingerichtet ist, mit einem Iframe mit dem Youtube Video. Dabei sind einige Optionen gesetzt fuer das Video wie Autoplay. [code]

[/code] Die beiden verschachtelten sind entstanden, weil sonst die Zentrierung nicht richtig funktioniert hat. Vielleicht hat da ja jemand eine Idee.

push

push :slight_smile:

Ein Tip: Nur weil man das Video nicht sieht, heisst das nicht, dass es auch weg ist :wink: Möglichkeiten: 1. Die Modalbox ist beim “schliessen” ausserhalb des Sichtbereichs (z.B. position:absolute; left -1000px) und spielt dort munter weiter. 2. Die Modalbox ist im Sichbereich und wurde mit visibility: hidden unsichtbar gemacht (normalerweise spielt hier das Video weiter) 3. Die Modalbox ist im Sichtbereich und wurde mit display: none unsichtbar gemacht (normalerweise spielt das Video nicht weiter)

Hallo brettvormkopp, dann vermute ich den Bösewicht doch mal im fadeOut() von jquery. Also in der jquery.shopware.js Laut jquery Api hat .fadeOut( [duration] [, complete] ) die Möglichkeit eine Funktion aufzurufen, wenn der Fade Out komplett abgeschlossen ist. Da muesste man doch jetzt so etwas wie windowClose setzen können und die Welt wäre gerettet. Was wäre denn da sie korrekte Syntax? Und wenn’s Update sicher sein soll… kann man die jquery.shopware.js beerben ähnliche wie bei den Templates? Wobei das wichtigste wäre, dass ich das ueberhaupt zum Laufen bekomme. Der Shop soll nächste Woche live gehen. Das muessten die relevanten Teile aus der jquery.shopware.js sein: //Cloeses the current modal window $.modalClose = function () { if (config.useOverlay == true) { $.modal.overlay.fadeOut() } if($.browser.msie && parseInt($.browser.version) == 6) { $.ie6fix.close($('.modal'), config); } else { if (config.position == 'absolute') { $('.modal').fadeOut(config.animationSpeed) } else if (config.position == 'fixed') { $('.modal').animate({ 'top': -($('.modal').height() + 100) + 'px' }, config.animationSpeed) } $('.modal').fadeOut(); } }; Evtl. muesste im Code darunter auch noch etwas geändert werden. Da wird noch ein Methode definiert, die ein Modal Fenster mit Iframe öffnet bzw. schliesst. //Creates a modal window with an iframe and a headline Es gruesst und dankt im voraus: Peter

Eieiei. Also liegt es an Möglichkeit 3, wobei er es scheinbar doch weiterspielt. Ich habe eine Lösung gefunden. Du könntest im Javascript das video Stoppen und dann schliessen lassen. Hier ist der Link: stackoverflow

Nabend. Vielen Dank fuer den Link. Ich werd gleich noch ein bisschen rumschrauben. Aber es wird vermutlich folgende Probleme geben: In den Einkaufswelten wird Javascript vom Tiny Editor bereinigt. D.h. entweder die Bereinigung deaktivieren (wo?) oder den Code direkt in die Datenbank schreiben. Beides irgendwie bäh. Wenn ich in den Einkaufswelten ein eigenes Template auswähle, kann ich zwar mit Javascript arbeiten aber die Elemente wie Bannerslider etc nicht mehr nutzen. D.h. ich muss wohl doch in die jquery.shopware.js Aber da sprengt’s mich echt mit der Syntax. Ich werd’s auf jeden Fall probieren, aber das ist so ein bisschen ausserhalb meiner Reichweite fuerchte ich. Wenn das bis nächste Woche alles fertig sein soll, bin ich vermutlich auf mehr oder weniger fertigen Code angewiesen. Wenn Du da Zeit und Lust haben solltest, wär das ganz ganz prima. Sollte ich es wider erwarten selbst lösen, werd ich natuerlich das Ergebnis stolz wie Oskar hier präsentieren.

Ja, die jquery.shopware.js umschreiben. Den richtigen Teil haste doch schon gefunden. Alternativ kannste ja auch schnell deine eigene Modalbox schreiben, ist sicherlich einfacher als auf dieses bescheidene javascript zurückzugreifen.

Hallo, so etwas sollte funktionieren: $('p.close\_video\_modal').click(function(e) { e.preventDefault(); iframe\_src = $('.video\_modal iframe').attr('src'); $('.video\_modal iframe').attr('src', ''); $('.video\_modal').hide(); $('.video\_modal iframe').attr('src', iframe\_src); }); [code]

CLOSE

[/code] Das div.video_modal müsste dann im CSS mit absolute positioniert werden. Geöffnet würde es z. B. mit einem Button und $(’.video_modal’).show(), das habe ich jetzt weggelassen. Ebenso alle anderen denkbaren Tags für Positionierungen etc. Wenn man das modal durch den Klick auf CLOSE schließt, wird zuerst die Link des iframes entfernt. Dann sollte es aufhören zu spielen. Anschließend wird der Link wieder hinzugefügt, damit mit bei einem neuen Aufruf des “Modals” wieder ein Video gespielt wird. Anschließend wird das “Modal-DIV” mit hide() wieder “entfernt”. Soll es in einer Einkaufwelt stehen, kann man sich ein eigenes EK-Element erstellen und da funktioniert es mit Javascript problemlos. Die Shopware-jQuery Funktionen können in einer eigenen Javascript-Datei überlagert werden. Aber davon würde ich abraten, schließlich “verlässt” sich der Rest des Shops auf die Originalfassung. Viele Grüße HTH