Bootstrap Modals & Youtube: automatische Wiedergabe-und Stopp-auf Schließen

Ich muss in der Lage sein, um die automatische Wiedergabe ein youtube-video, wenn ein Twitter-Bootstrap modal geöffnet wird und anschließend beenden Sie das video, das Sie auf schließen.

Ich weiß, diese Frage wurde vorher gefragt, aber die Antworten, die ich finden kann, würde dazu führen, eine MENGE von javascript-code für eine Seite, die enthält VIELE videos, und ich versuche zu reduzieren auf die aufblasen. Bisher habe ich die folgenden arbeiten für einzelne videos, aber das Problem ist, dass jedes modal und jedes video muss über diesen javascript-code wiederholt werden mit den richtigen Variablen.

$('#vidThumbnail-1').click(function () {
        var src = 'http://www.youtube.com/embed/8bKmrhI-YT8?&amp;autoplay=1';
        $('#vid1').modal('show');
        $('#vid1 iframe').attr('src', src);

      //Fit Vids Implamented Below for Mobile Compatibility
        $("#vid1Thumbnail-1 iframe").wrap("<div class='flex-video'/>");
        $(".flex-video").fitVids();
    });
$('#vid1 button').click(function () {
        $('#vid1 iframe').removeAttr('src');
    });

HTML:

<div id="vidThumbnail-1"><img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg" /></div>

<div id="vid1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <iframe src="http://www.youtube.com/embed/8bKmrhI-YT8" width="640" height="360" frameborder="0" allowfullscreen></iframe>   
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    </div>
  </div>

Diese wird aufgebläht, wenn man 20 videos und 20 modals!
Gibt es eine Möglichkeit, um die Verwendung der Data-Attribute Methode für die Initiierung einer modal-built-in bootstrap anstatt nennen Sie es einzeln, während noch das ändern der iframe-src-innerhalb der Ziel-modal? Der link zum öffnen des modalen wäre dann:

<a href="#vid1" role="button" data-toggle="modal">
<img src="http://img.youtube.com/vi/8bKmrhI-YT8/0.jpg"></a>

Dann:

Lesen der bestehenden src-Attribut des iframe in der Ziel-modal (auf eine variable?)
Fügen Sie die vorhandenen Attribut " src " mit "&autoplay=1" starten Sie das video.
Ersetzen Sie das src-Attribut mit dem original beim schließen des modal (über die Schaltfläche speziell wie es oben ist, ist gut).

Diese Weise würde ich nicht schreiben müssen, das Skript für jeden einzelnen modal, spart eine Menge Zeit UND aufgebläht JS. Allerdings habe ich keine Ahnung, wo Sie beginnen, ändern die bootstrap.js um dies zu erreichen und ich bin nicht erfahren in JS (oder alle) Programmierung. Vielen Dank für jede Hilfe Sie mir geben können!

InformationsquelleAutor Benjamin Morrison | 2013-05-26

8

Meine Lösung:
- tun nicht hinzufügen &autoplay=1 auf den iframe src manuell
dann fügen Sie dieses Skript:
```
var videoSrc = $("#myModal iframe").attr("src");

$('#myModal').on('show.bs.modal', function () { //on opening the modal
  //set the video to autostart
  $("#myModal iframe").attr("src", videoSrc+"&amp;autoplay=1");
});

$("#myModal").on('hidden.bs.modal', function (e) { //on closing the modal
  //stop the video
  $("#myModal iframe").attr("src", null);
});
```
dies bewirkt, dass Fehler während des Spielens. Verwenden Sie "?autoplay=1" anstelle von "&autoplay=1"
verwenden Sie "?autoplay=1" an, wenn Sie keine bestehenden params auf Ihrem youtube-url und die automatische Wiedergabe ist der erste ein, ansonsten verwenden Sie "&autoplay=1" hinzufügen einer zweiten oder mehreren param.

InformationsquelleAutor Francesco Borzi

                    <div class="close-button">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                    </div>

   $('.close').on('click', function (e) {
        $("#myModal iframe").attr("src", null);
    });

InformationsquelleAutor Ali özyıldırım

Hier ist ein JS Fiddle.

Ich habe ein bisschen von progressive enhancement, also waren die JS zu scheitern, Sie würden ergriffen werden, um das YouTube-video in diesem Fall.

Den link erfordert ein Daten-video-einbetten und ein Ziel, wohin wir gehen, um die video-alles andere sollte funktionieren. Die Veranstaltung ist die im Beispiel für Bootstrap 3 modal, wenn Sie mit 2.X es wird nur 'verstecken'.

$('[data-provider="modal-video"]')
   .on('click', function (evt) {
      evt.preventDefault();
      var $target = $(evt.currentTarget),
          videoSrc = $target.data('video-embed'),
          $modal = $($target.data('target'));

      $modal
        .find('iframe').attr('src', videoSrc)
        .end()
        .on('hide.bs.modal', function () {
            $(this)
                .off('hide.bs.modal')
                .find('iframe').attr('src', '');
        })
        .modal('show');
});

InformationsquelleAutor benembery

Konnte ich nicht finden, eine dynamische Art und Weise zu behandeln dieses Problem, so habe ich eine dynamische Art und Weise zu handhaben, für eine Website, an der wir arbeiten.

Hier sind die links:

<li><a href="#" data-toggle="modal" data-target="#video1">Video: video 1</a></li>
<li><a href="#" data-toggle="modal" data-target="#video2">Video: video 2</a></li>

Hier sind die modals:

<div id="video1" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/vidpath" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="video2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/vidpath2" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Hier ist das Skript:

//autoplay video functionality
$( "[data-target^='#video']" ).click(function() { 
    //get the ID of the clicked video
    var dataTarget = $(this).attr("data-target");
    dataTarget = dataTarget.substring(1,7); 
    var vidId = '#'+dataTarget; 

    //get the vid src
    var vidSrc = $(vidId+ " iframe").attr('src');

    //create the autoplay
    var vidSrcAuto = vidSrc+'?autoplay=1'; 

    //get the iframe element
    var iframeEl = $(vidId+ " iframe"); 


    $(vidId).on('show.bs.modal', function () {  
        $(iframeEl).attr("src", vidSrcAuto);
    });

    $(vidId).on('hidden.bs.modal', function (e) {  
        $(iframeEl).attr("src", vidSrc);  
    });   

});

InformationsquelleAutor Brit Finnegan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.