Ich versuche, die Modal-Funktion von Bootstrap 3 zu verwenden, um mein Youtube-Video anzuzeigen. Es funktioniert, aber ich kann keine Schaltflächen im Youtube-Video anklicken.
Hilfe dazu?
Hier ist mein Code:
<div id="link">My video</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<iframe width="400" height="300" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.1.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script>
$('#link').click(function () {
var src = 'http://www.youtube.com/v/FSi2fJALDyQ&autoplay=1';
$('#myModal').modal('show');
$('#myModal iframe').attr('src', src);
});
$('#myModal button').click(function () {
$('#myModal iframe').removeAttr('src');
});
</script>
jquery
css
twitter-bootstrap
youtube
twitter-bootstrap-3
NitroMedia
quelle
quelle
Ich habe dieses dynamische HTML / jQuery-Modalskript für YouTube-Videos zusammengestellt, das das YouTube-Video automatisch abspielt, wenn auf den Auslöser (Link) geklickt wird. Der Auslöser enthält auch den abzuspielenden Link. Das Skript findet den nativen Bootstrap-Modalaufruf und öffnet die gemeinsam genutzte Modalvorlage mit den Daten vom Trigger. Siehe unten und lassen Sie mich wissen, was Sie denken. Ich würde gerne Gedanken hören ...
HTML MODAL TRIGGER:
HTML MODAL VIDEO TEMPLATE:
DIE JQUERY-FUNKTION:
DER FUNKTIONSRUF:
The FIDDLE: http://jsfiddle.net/jeremykenedy/h8daS/1/
quelle
hidden.bs.modal
Ereignis als Mittel zum Ausschalten des Videos verwenden, da der Benutzer andere Aktionen ausführen kann, um das Modal zu schließen (z. B. außerhalb klicken).Ich habe einen Tipp für dich!
Ich würde ... benutzen:
anstatt:
Da Sie das Modal auch ohne die Schaltfläche schließen können, wird mit diesem Code das Video jedes Mal entfernt, wenn sich das Modal versteckt.
quelle
'src'
Ich habe dies in einem anderen Thread gefunden und es funktioniert hervorragend auf Desktop- und Mobilgeräten - was bei einigen anderen Lösungen nicht der Fall zu sein schien. Fügen Sie dieses Skript am Ende Ihrer Seite hinzu:
quelle
Hier ist eine andere Lösung: HTML5-YouTube-Video erzwingen
Fügen Sie einfach? Html5 = 1 zum Quellattribut im iframe hinzu:
quelle
Wenn Sie das Bootstrap-CSS nicht bearbeiten möchten oder all das oben Genannte überhaupt nicht hilft (wie in meinem Fall), gibt es eine einfache Lösung, um das Video in einem Modal unter Firefox zum Laufen zu bringen.
Sie müssen nur die "Fade" -Klasse aus dem Modal entfernen und beim Öffnen auch die "In" -Klasse:
quelle
Ich habe es auf WordPress-Vorlage gelöst:
quelle
Versuchen Sie dies für Bootstrap 4
Besuchen Sie: https://parrot-tutorial.com/run_code.php?snippet=bs4_modal_youtube
quelle
Bootstrap bietet sofort modale Popup-Funktionen.
quelle
MMhh ... Könnten Sie Ihr gesamtes HTML-Dokument veröffentlichen und welchen Browser / welche Version verwenden Sie?
Ich habe Ihre Seite neu erstellt und in 3 Browsern (Chrome, FF, IE8) getestet. Ich konnte den fantastischen WDS4-Trailer ohne Probleme stoppen und starten. Hier ist mein Code:
Sie könnten versuchen, den Z-Index Ihres Modal-Players höher in den Stapel zu bringen?
$('#myModal iframe').css("z-index","999");
quelle
quelle
Verwenden von
$('#introVideo').modal('show');
Konflikten mit Bootstrap ordnungsgemäße Auslösung. Wenn Sie auf den Link klicken, der das Modal öffnet, wird es direkt nach Abschluss der Überblendungsanimation geschlossen. Entfernen Sie einfach die$('#introVideo').modal('show');
(mit Bootstrap v3.3.2)Hier ist mein Code:
quelle
Die Antwort von user3084135 funktionierte gut als Basis für mich, aber ich musste auch Folgendes einbeziehen:
Meine fertige Lösung sieht folgendermaßen aus:
MODAL TRIGGER-TASTE
Das Datenrahmenattribut kann entweder "iframe" oder "video" sein, um den entsprechenden Tag-Typ wiederzugeben: iframe für externe Videos, Video für lokal gehostete.
BOOTSTRAP RESPONSIVE VIDEOBEHÄLTER
iFrame:
Video:
Diese beiden befinden sich in den standardmäßigen Bootstrap-responsiven Modal-Divs.
JQUERY SCRIPT
Da die automatische Wiedergabe mit Iframe- und Video-Tags unterschiedlich funktioniert, wird für jede Behandlung eine Bedingung verwendet. Um mehrere Modalitäten zuzulassen, wird ein Platzhalter-Selektor verwendet, um sie zu identifizieren (in meinem Fall PortfolioModal1-6).
quelle
Ich hatte das gleiche Problem - ich hatte gerade die font-awesome cdn-Links hinzugefügt - das Kommentieren des Bootstraps unten löste mein Problem. Ich habe es nicht wirklich behoben, da die font awesome immer noch funktionierte -
quelle
OK. Ich habe eine Lösung gefunden.
quelle
Für Bootstrap 4, das Videos, Bilder und Seiten verarbeitet ...
http://jsfiddle.net/c4j5pzua/
quelle
quelle