Comment intégrer une vidéo YouTube en muet

 L'intégration classique des vidéos YouTube sur votre site est très simple, il vous suffit de copier le code d'intégration fourni entre les IFRAME, de le coller dans votre page web et le tour est joué. Comme vous le savez, YouTube vous propose déjà quelques configurations élémentaires: vous pouvez modifier les dimensions du lecteur, de cacher l'image de marque YouTube...etc, mais si vous voulez exercer plus de contrôle sur le lecteur YouTube vous n'avez qu'à utiliser l'API Player YouTube.

 Ce tutoriel va vous montrer comment intégrer une vidéo YouTube dans votre page web en muet sachant qu'elle se joue automatiquement.
 Un exemple qu'on rencontre souvent dans le web est lorsque la page web se charge avec la vidéo, le volume de celle ci est mis à 0, cependant l'utilisateur peut activer le son lorsqu'il clique sur elle, je trouve que c'est une solution pratique au lieu de déranger le visiteur avec un son apparue de nulle part. Donc, c'est préférable d'utiliser une vidéo YouTube en arrière plan en muet et qui fonctionne en boucle.

 Voici donc comment intégrer une vidéo YouTube avec un son désactivé:
C'est une technique très facile, notez d'abord l'ID de la vidéo YouTube cible à partir de son URL; si le lien de la vidéo est par exemple: https://www.youtube.com/watch?v=9bZkp7q19f0, l'ID  de la vidéo sera: 9bZkp7q19f0. Une fois que vous avez l'ID entre vos mains, vous n'avez qu'à remplacer "YOUR_VIDEO_ID" par cette ID dans le code ci dessous:

<div id="muteYouTubeVideoPlayer"></div>

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
 function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('muteYouTubeVideoPlayer', {
    videoId: 'YOUR_VIDEO_ID', // YouTube Video ID
    width: 560,               // Player width (in px)
    height: 316,              // Player height (in px)
    playerVars: {
      autoplay: 1,        // Auto-play the video on load
      controls: 1,        // Show pause/play buttons in player
      showinfo: 0,        // Hide the video title
      modestbranding: 1,  // Hide the Youtube Logo
      loop: 1,            // Run the video in a loop
      fs: 0,              // Hide the full screen button
      cc_load_policty: 0, // Hide closed captions
      iv_load_policy: 3,  // Hide the Video Annotations
      autohide: 0         // Hide video controls when playing
    },
    events: {
      onReady: function(e) {
        e.target.mute();
      }
    }
  });
 }
</script>

 Cependant vous pouvez configurer d'avantage le lecteur de la vidéo en modifiant les différentes variables expliquées (à coté de chaque variable) ci dessous dans l'image: par exemple si vous donnez la valeur 1 à la variable "loop"( boucle en français) la vidéo va se jouer en boucle, si vous donner 1 à la valeur "fs" le bouton du mode plein écran s'affichera à l'intérieur du lecteur de la vidéo ( à votre droite)....

 A savoir que le lecteur est intégré grâce à l'utilisation de l'API IFRAME de YouTube, une fois la page est chargée, la variable Oneready de l"events" va couper le son de la vidéo.