Trucsweb.com

Trucsweb.com

Javascript

Bootstrap

RDFFav

Bootstrap 5 - Ouvrir une vidéo YouTube dans une fenêtre modale

Une fenêtre modale dynamique avec une vidéo YouTube ou Vimeo avec arrêt automatiquement à la fermeture de la fenêtre.Bootstrap 5, YouTube, Modal, vidéoBootstrap 5 - Ouvrir une vidéo YouTube dans une fenêtre modale

Jean Paul Riopelle (1923-2002), Point de rencontre - Quintette (polyptyque), 1963, huile sur toile, 428 x 564 cm (5 panneaux).
Paris, Centre national des arts plastiques. Photo : © Succession Jean Paul Riopelle / SOCAN (2020). Photo : CNAP

Une fenêtre modale dynamique avec une vidéo YouTube ou Vimeo avec arrêt automatiquement à la fermeture de la fenêtre.

Faire une entête de type « hero » avec une vidéo HTML5 c’est super mais dur dur avec un iFrame. En d’autres mots, avec une vidéo YouTube ou Vimeo. La solution, se contenter d’un bouton et d’une fenêtre modale pour contenir le iFrame de la vidéo. Quoi de plus facile avec Bootstrap 5 :

<!-- Le bouton (attention, retirer le « bs » pour la version Bootstrap 4 : <code>data-toggle</code> et <code>data-target</code>) -->

<button type="button" class="btn" data-bs-toggle="modal" data-bs-target="#oModalYouTube">
  Ouvrir la vidéo
</button>

<!-- La modale -->

<div class="modal fade" id="oModalYouTube" tabindex="-1" aria-labelledby="oModalYouTubeTitre" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="oModalYouTubeTitre">Jean-Paul Riopelle</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
      </div>
      <div class="modal-body">
        <div class="ratio ratio-16x9">
          <iframe id="oVideoYouTubeiFrame" src="https://www.youtube.com/embed/WRKOwsIkwEY?html5=1" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

Noter l’utilisation des classes Bootstrap « ratio » et « ratio-16x9 » pour imbriquer une vidéo pleine grandeur, fluide tout en préservant les proportions. Petit truc, ajoutez le paramètre « html5=1 » au bout de l’adresse pour forcer une vidéo HTML5 au lieu d’un Flash. Ça fonctionne dans certains cas même si ça ne semble plus faire partie des paramètres officiels de YouTube. Mais qu’est-ce qu’on a à perdre pour quelques lettres supplémentaires ?

Gérer le playback

Outre les dimensions et les proportions du iFrame, il faut prévoir l’arrêt de la lecture (playback) lorsque la fenêtre se ferme. Et là encore, Bootstrap fait le travail, à l’aide des évènements JavaScript hide.bs.modal et show.bs.modal. Et c’est vraiment simple comme idée. Au lieu de se casser la tête à provoquer l’arrêt de la vidéo, dans ce cas-ci l’arrêt d’un objet vidéo Flash ou HTML5 dans un iFrame, le truc consiste à conserver l’adresse de la vidéo dans une variable puis de retirer carrément la vidéo du iFrame. De cette façon, la prochaine lecture devra charger à nouveau la vidéo (en fait la page) à partir de la variable. La vidéo se retrouvera au début et à l’arrêt :

<script>
// Exemple en pur JavaScript (Vanilla)
document.addEventListener('DOMContentLoaded', function() {
  var sUrlVideoAccueil = document.getElementById('oVideoYouTubeiFrame').getAttribute('src');
  var oModalYouTubeElement = document.getElementById('oModalYouTube');
  oModalYouTubeElement.addEventListener('hide.bs.modal', function (event) {
    document.getElementById('oVideoYouTubeiFrame').setAttribute('src', '');
  })
  var oModalYouTubeElement = document.getElementById('oModalYouTube');
  oModalYouTubeElement.addEventListener('show.bs.modal', function (event) {
    document.getElementById('oVideoYouTubeiFrame').setAttribute('src', sUrlVideoAccueil);
  })
});
</script>

Note : Le fun avec Bootstrap 5, c’est qu’il n’est pas dépendant de jQuery. Mais si vous utilisez déjà jQuery, voilà l’équivalent :

<script>
// Exemple jQuery
$(document).ready(function(){  
  var url = $("#oVideoYouTubeiFrame").attr('src');
  $("#oModalYouTube").on('hide.bs.modal', function(){
      $("#oVideoYouTubeiFrame").attr('src', '');
  });
  $("#oModalYouTube").on('show.bs.modal', function(){
      $("#oVideoYouTubeiFrame").attr('src', url);
  });
});
</script>
Automatisation

Maintenant, c’est bien beau une fenêtre modale statique si vous avez une seule vidéo. Mais si vous avez plusieurs vidéos à présenter, et même si Bootstrap ne permet qu’une seule modale à la fois, pourquoi ne pas dynamiser le tout à l’aide de paramètre data-* !

<!-- Par exemple à l’aide d’un bouton du genre : -->
<button type="button"
 class="cBtnYouTube btn"
 data-bs-toggle="modal"
 data-bs-target="#oModalYouTube"
 data-url="https://www.youtube.com/embed/WRKOwsIkwEY?html5=1"
 data-titre="Jean-Paul Riopelle"
>
  Ouvrir la vidéo
</button>

Et le code suivant :


<script>
// Exemple en pur JavaScript (Vanilla)
document.addEventListener('DOMContentLoaded', function() {
  var oModalYouTubeElement = document.getElementById('oModalYouTube')
  oModalYouTubeElement.addEventListener('hide.bs.modal', function (event) {
    document.getElementById('oModalYouTubeTitre').innerHTML = '';
    document.getElementById('oVideoYouTubeiFrame').setAttribute('src', '');
  })
});

window.addEventListener("DOMContentLoaded", function(e) {
  x = document.getElementsByClassName("cBtnYouTube");
  var i;
  for (i = 0; i < x.length; i++) {
    x[i].addEventListener("click", 
      function (event) {
        event.preventDefault();
        document.getElementById('oModalYouTubeTitre').innerHTML = '<i class="fab fa-youtube"></i> '+this.getAttribute('data-titre');
        document.getElementById('oVideoYouTubeiFrame').setAttribute('src', this.getAttribute('data-url'));
      }, 
    false);
  }
}, false);
</script>
Code complet avec le iFrame parfait pour une vidéo YouTube
<!doctype html>
<html lang="fr-CA">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Vidéo YouTube dans une fenêtre modal | Trucsweb.com</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
  </head>
  <body>
    <div class="bg-dark text-secondary px-4 py-5 text-center">
      <div class="py-5">
        <h1 class="display-5 fw-bold text-white">Vidéo YouTube dans une fenêtre modal</h1>
        <div class="col-lg-6 mx-auto">
          <p class="fs-5 mb-4">Vidéo de Jean Paul Riopelle sur YouTube</p>
          <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
            <button type="button" class="cBtnYouTube btn" data-bs-toggle="modal" data-bs-target="#oModalYouTube" data-url="https://www.youtube.com/embed/WRKOwsIkwEY?html5=1" data-titre="Jean-Paul Riopelle"><i class="fab fa-youtube fa-3x" style="color:#ff0000;"></i></button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="oModalYouTube" tabindex="-1" aria-labelledby="oModalYouTubeTitre" aria-hidden="true">
      <div class="modal-dialog  modal-dialog-centered">
        <div class="modal-content rounded-0">
          <div class="modal-header rounded-0 border-0" style="color:#fff;background-color:#000">
            <p id="oModalYouTubeTitre" class="modal-title lh-1"></p>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
          </div>
          <div class="modal-body p-0">
            <div class="ratio ratio-16x9">
              <iframe id="oVideoYouTubeiFrame" src="" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      var oModalYouTubeElement = document.getElementById('oModalYouTube')
      oModalYouTubeElement.addEventListener('hide.bs.modal', function (event) {
        document.getElementById('oModalYouTubeTitre').innerHTML = '';
        document.getElementById('oVideoYouTubeiFrame').setAttribute('src', '');
      })
    });
    
    window.addEventListener("DOMContentLoaded", function(e) {
     	x = document.getElementsByClassName("cBtnYouTube");
     	var i;
         for (i = 0; i < x.length; i++) {
           x[i].addEventListener("click", 
           function (event) {
              event.preventDefault();
              document.getElementById('oModalYouTubeTitre').innerHTML = '<i class="fab fa-youtube"></i> '+this.getAttribute('data-titre');
              document.getElementById('oVideoYouTubeiFrame').setAttribute('src', this.getAttribute('data-url'));
           }, 
           false);
         }
     }, false);
    </script>
  </body>
</html>
Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

10/10 sur 1 revues.
       Visites : 70 - Pages vues : 88
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@