Intégrer une vidéo Youtube sans son

Comment intégrer une vidéo YouTube avec le son désactivé ?

Voici une astuce pour intégrer une vidéo YouTube sur votre site en désactivant le son par défaut.

Étapes à suivre :

1. Trouvez l’ID de la vidéo YouTube dans l’URL de la vidéo.
2. Remplacez YOUR_VIDEO_ID dans le code ci-dessous par l’ID de votre vidéo.
3. Copiez le code modifié dans votre page web.

Code à utiliser :

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

<script>
// Charger l'API YouTube de manière asynchrone
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Fonction appelée quand l'API est prête
function onYouTubeIframeAPIReady() {
new YT.Player('muteYouTubeVideoPlayer', {
videoId: 'YOUR_VIDEO_ID', // Remplacez par l'ID de votre vidéo YouTube
width: 560, // Largeur du lecteur (en px)
height: 315, // Hauteur du lecteur (en px)
playerVars: {
autoplay: 1, // Lecture automatique à l'ouverture
mute: 1, // Son désactivé par défaut
controls: 1, // Afficher les contrôles du lecteur
showinfo: 0, // Masquer le titre de la vidéo
modestbranding: 1, // Masquer le logo YouTube
loop: 1, // Lire la vidéo en boucle
fs: 0, // Masquer le bouton plein écran
cc_load_policy: 0, // Masquer les sous-titres
iv_load_policy: 3, // Masquer les annotations
autohide: 0 // Ne pas masquer les contrôles pendant la lecture
},
events: {
onReady: function(e) {
e.target.mute(); // S'assurer que le son est coupé
}
}
});
}
</script>

Explication des options :

• videoId: L’ID unique de la vidéo YouTube que vous souhaitez intégrer.
• width et height: Les dimensions du lecteur vidéo en pixels.
• autoplay: 1: La vidéo se lance automatiquement au chargement de la page.
• mute: 1: Le son est désactivé par défaut.
• controls: 1: Les contrôles du lecteur sont affichés.
• showinfo: 0: Le titre de la vidéo est masqué.
• modestbranding: 1: Le logo YouTube est moins visible.
• loop: 1: La vidéo est lue en boucle.
• fs: 0: Le bouton plein écran est masqué.
• cc_load_policy: 0: Les sous-titres sont masqués par défaut.
• iv_load_policy: 3: Les annotations vidéo sont masquées.
• autohide: 0: Les contrôles restent visibles pendant la lecture.

Une fois ce code inséré et l’ID de la vidéo remplacé, vous aurez une vidéo YouTube bien intégrée, sans le son activé par défaut.

Remarque

Assurez-vous de respecter les conditions d’utilisation de YouTube et les droits d’auteur lorsque vous intégrez des vidéos sur votre site.