Wenn Sie das Videobild auswählen, sehen Sie ein modales Fenster, in dem ein YouTube-Video geöffnet wird. Das Problem, das ich habe, ist, dass das Video weiter abgespielt wird, wenn das modale Fenster geschlossen wird. Ich möchte, dass dieses Video stoppt, wenn das modale Fenster geschlossen wird.
Ich habe online gesucht und viele Lösungen gelesen, aber keine scheint zu funktionieren. Hier ist die Markierung …
Falls noch jemand nach der Antwort sucht: stackoverflow.com/a/36313110/6135496
– Jax297
30. März 2016 um 15:25 Uhr
Hier ist eine etwas leichtere Antwort, die auf der Version von Dizarter und einer der Lösungen basiert, auf die er verweist.
$('#modal-video').on('hidden.bs.modal', function () {
$("#modal-video iframe").attr("src", $("#modal-video iframe").attr("src"));
});
Ich benutze dies, aber es funktioniert nur, wenn das Video nicht auf Autoplay eingestellt ist.
– Perri
24. Juli 2015 um 14:39 Uhr
Als Ergänzung zur Antwort von CloudKiller habe ich eine Lösung hinzugefügt, die mit Autoplay @Perry funktioniert
– Danny Mahoney
12. Februar 2019 um 10:15 Uhr
dizarter
Das Testen hier in FireFox 26.0 funktioniert wie erwartet. Wenn ich entweder das Modal schließe oder außerhalb davon klicke und es dann erneut öffne, wird das Video wieder gestartet und gestoppt.
BEARBEITEN 1
Das in Chrome wiedergegebene Video wird tatsächlich weiter abgespielt, nachdem das Modal geschlossen wurde.
Probieren Sie diese bereits beantworteten Fragen aus
Stoppen Sie ein YouTube-Video mit jquery?
Twitter Bootstrap Modal stoppt Youtube-Video
Der beste Weg scheint zu sein, die YouTube-API zu verwenden, um das Video zu stoppen. Antworten, die diese Methode verwenden, sind in den obigen Fragen verfügbar.
BEARBEITEN 2
Diese Lösung scheint zu funktionieren.
Holen Sie sich zuerst das JS aus diesem Beitrag: YouTube iframe API: Wie steuere ich einen iframe-Player, der sich bereits im HTML befindet? und auf der Seite einfügen.
Fügen Sie dieses JS hinzu, nachdem Sie das obige Skript geladen haben (kurz vor dem schließenden Body-Tag).
<script type="text/javascript">
$('#myModal').on('hidden.bs.modal', function () {
callPlayer('yt-player', 'stopVideo');
});
</script>
Sie müssen dem div, das den Iframe enthält, auch eine ID hinzufügen, wie unten beschrieben
Danke für deinen Input dizarter. Ich habe mir die Threads angesehen, die Sie gerade gepostet haben, und keine der Lösungen schien zu funktionieren, was bedeutet, dass mir wahrscheinlich etwas fehlt
Hallo Stephen, bitte überprüfen Sie die aktualisierte Antwort oben und lassen Sie mich wissen, ob sie funktioniert.
– Dizarter
25. März 2014 um 11:32 Uhr
Das hat funktioniert. Du bist eindeutig erstaunlich! Vielen Dank dafür. Wünschte, ich wäre so schlau wie du Dizarter.
– Stefan Tamlin
4. April 2014 um 15:45 Uhr
Stephen, du könntest die Antwort auch positiv bewerten, das würde viel bedeuten. 🙂 Vielen Dank.
– Dizarter
3. Mai 2014 um 3:48 Uhr
Diese Lösung funktioniert gut für Boostrap 4. Sie unterstützt viele verschiedene Modale auf derselben Seite, ohne die Modal-ID anzugeben. Hier ist die Demo http://jsfiddle.net/hxtpoe/6k09f4x2/
$('.modal').on('hide.bs.modal', function() {
var memory = $(this).html();
$(this).html(memory);
});
Das ist brilliant! Die anderen Antworten, die das Zurücksetzen des iframe src erfordern, funktionieren nicht richtig, wenn das Modal mehr als ein Video enthält. (Nach dem Schließen des Modals und erneutem Öffnen lädt der Iframe möglicherweise einen falschen Link.) Dies ist eine viel brillantere Methode, um zu verhindern, dass die Quelle des Iframes falsch geladen wird, wenn das Modal mehr als ein Video enthält!
– ansicht1
22. Juli 2020 um 0:11 Uhr
Super @Łukasz! Ich habe dieses @ forwardemail.net aber optimiert, so dass Modale nicht geändert werden, es sei denn, es gibt eine <iframe> darin (z. B. YouTube). Ich habe es auch so gemacht, dass es auch für Modals funktioniert, die neu zum DOM hinzugefügt wurden. Ihr aktueller Code funktioniert ohne die von mir vorgenommenen Änderungen nicht für neue Modale. Siehe meinen Kommentar unten für die neu aktualisierte Lösung @ stackoverflow.com/a/66014515/3586413.
– Benutzer3586413
2. Februar 2021 um 17:16 Uhr
Bruno Ribeiro
Schauen Sie sich meinen Code an. Ich musste keine API verwenden
// on preview show iframe
$('#myModalPrev').on('show.bs.modal', function (e) {
var idVideo = $(e.relatedTarget).data('id');
$('#myModalPrev .modal-body').html('<iframe width="100%" height="400px" src="https://www.youtube.com/embed/'%20+%20idVideo%20+%20'?autoplay=true" frameborder="0" allowfullscreen></iframe>');
});
//on close remove
$('#myModalPrev').on('hidden.bs.modal', function () {
$('#myModalPrev .modal-body').empty();
});
Viel einfacher einfacher inspiriert von @Łukasz per https://stackoverflow.com/a/52315492/3586413 mit Live-Demo @ https://forwardemail.net.
//
// any modals with embedded <iframe> we can assume need reset
// <https://stackoverflow.com/a/52315492>
//
$('body').on('hide.bs.modal', '.modal', function() {
const $modal = $(this);
// return early if there were no embedded YouTube videos
if ($modal.find('iframe').length === 0) return;
const html = $modal.html();
$modal.html(html);
});
Beste Antwort meiner Meinung nach. Funktioniert mit “unendlicher” Menge an Modals / Iframe-Elementen, ohne dass sie explizit per ID angegeben werden müssen.
– Georg Adamon
22. Mai 2021 um 17:24 Uhr
Das ist auch in Ordnung. Vielen Dank für die Verbesserung von stackoverflow.com/a/52315492/2594499
– Lukasz
27. Mai 2021 um 15:45 Uhr
Rette mein Leben. Danke!
– Riad Khalifeh
22. September 2021 um 13:30 Uhr
Beste Antwort meiner Meinung nach. Dadurch konnte ich mehrere YouTube-Modals auf einer Seite haben und beim Schließen stoppen.
– Chad Warren
24. Mai um 19:44 Uhr
Danny Mahoney
Hier ist eine Alternative zu CloudKillers Antwort, die tatsächlich mit Autoplay funktioniert, ändern Sie einfach .attr zu .removeAttr so:
Aber eine noch mehr verkleinerte/vereinfachte Version davon besteht darin, einfach die zu ersetzen src mit leerem Wert:
$('#myModal iframe').attr('src', '');
Der einzige Code, den Sie hinzufügen müssen, damit dies funktioniert, ist:
jQuery('#myModal').on('hidden.bs.modal', function (e) {
$('#myModal iframe').attr('src', '');
});
Beste Antwort meiner Meinung nach. Funktioniert mit “unendlicher” Menge an Modals / Iframe-Elementen, ohne dass sie explizit per ID angegeben werden müssen.
– Georg Adamon
22. Mai 2021 um 17:24 Uhr
Das ist auch in Ordnung. Vielen Dank für die Verbesserung von stackoverflow.com/a/52315492/2594499
– Lukasz
27. Mai 2021 um 15:45 Uhr
Rette mein Leben. Danke!
– Riad Khalifeh
22. September 2021 um 13:30 Uhr
Beste Antwort meiner Meinung nach. Dadurch konnte ich mehrere YouTube-Modals auf einer Seite haben und beim Schließen stoppen.
– Chad Warren
24. Mai um 19:44 Uhr
Perri
Und wenn Sie wie ich möchten, dass die Videos automatisch abgespielt werden, und sie stoppen, wenn Sie auf das Bootstrap-Modal klicken, müssen Sie so etwas tun:
$('.modal-iframe-youtube').click(function (e) {
e.preventDefault();
var sitetypeHref = $(this).attr('href');
var sitetypeHrefAuto = sitetypeHref + "?autoplay=1"
//sitetypeHref = sitetypeHref.replace('watch?v=', 'v/');
$('#modal-window-iframe-youtube').on('shown.bs.modal', function () {
var iFrame = $(this).find("iframe");
iFrame.attr("src", sitetypeHrefAuto);
});
$("#modal-window-iframe-youtube").on('hidden.bs.modal', function () {
var iFrame = $(this).find("iframe");
iFrame.attr("src", sitetypeHref);
});
$('#modal-window-iframe-youtube').modal({ show: true });
});
Beachten Sie, dass ich das Argument „?autoplay=1“ dynamisch hinzufüge. Hoffe das hilft jemandem.
10178400cookie-checkYoutube-Video wird immer noch abgespielt, wenn Bootstrap Modal geschlossen wirdyes
Falls noch jemand nach der Antwort sucht: stackoverflow.com/a/36313110/6135496
– Jax297
30. März 2016 um 15:25 Uhr