Bootstrap Modals & Youtube: la lecture automatique et Arrêt sur Fermer

J'ai besoin d'être en mesure de la lecture automatique d'une vidéo youtube, lorsqu'un Twitter Bootstrap modal est ouvert et par la suite arrêter la vidéo sur fermer.

Je sais que cette question a déjà été posées, mais les réponses que je peux trouver conduirait à BEAUCOUP de code javascript d'une page qui contient de NOMBREUSES vidéos et je suis en train de couper vers le bas sur la météorisation. Jusqu'à présent j'ai de travail suivants pour les vidéos, mais le problème est que chaque modal et chaque vidéo doit avoir ce code javascript répété avec les bonnes variables.

$('#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>

Cela devient gonflé quand vous avez 20 vidéos et 20 auxiliaires modaux!
Est-il un moyen d'utiliser les Attributs de Données méthode de lancement d'un modal intégré dans bootstrap plutôt que de les appeler individuellement, tout en modifiant l'iframe src à l'intérieur de la cible seule modal? Le lien pour ouvrir le modal serait alors:

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

Alors:

Lire l'existant attribut src de l'iframe dans la cible modal (définie que pour une variable?)
Ajouter l'existant attribut src "&autoplay=1" pour lancer la vidéo.
Remplacer l'attribut src avec l'original à la fin de l'modal (via le bouton spécifiquement comme il est ci-dessus est très bien).

De cette façon je n'aurais pas besoin d'écrire le script pour chaque individu, de modal, de gagner beaucoup de temps ET de ballonnement JS. Cependant, je n'ai aucune idée de par où commencer à modifier le bootstrap.js pour accomplir cela, et je ne suis pas expérimenté en JS (ou toutes) de programmation. Merci pour toute aide que vous pouvez me donner!

OriginalL'auteur Benjamin Morrison | 2013-05-26

8

Ma solution:
- ne pas ajouter &autoplay=1 de l'iframe src manuellement
puis ajouter ce script:
```
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);
});
```
ce qui provoque une erreur lors de la lecture. Utiliser "?autoplay=1" au lieu de "&autoplay=1"
utiliser "?autoplay=1" si vous n'avez pas d'existant params sur votre url de youtube et de lecture automatique est la première, sinon utiliser des "&autoplay=1" pour ajouter une seconde ou plus param.

OriginalL'auteur 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);
    });

OriginalL'auteur Ali özyıldırım

Ici est un JS Fiddle.

J'ai ajouté un peu de l'amélioration progressive, telle était la JS à l'échec, vous serait pris pour de la vidéo YouTube dans ce cas.

Le lien nécessite de données-vidéo-intégrer et d'une cible à l'endroit où l'on va être l'ajout de la vidéo de toute autre chose doit marcher. Le cas dans l'exemple est pour Bootstrap 3 modale si vous utilisez 2.X, il va juste être "masquer".

$('[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');
});

OriginalL'auteur benembery

Je ne pouvais pas trouver une dynamique manière de traiter ce problème, j'ai donc créé une dynamique façon de gérer cela pour un site qui nous travaillons.

Voici les liens:

<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>

Voici les auxiliaires modaux:

<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>

Voici le script:

//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);  
    });   

});

OriginalL'auteur Brit Finnegan

Vous devez vous connecter pour publier un commentaire.