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:
La version éditable de ce script est la suivante:
<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>
Placez ensuite ce script modifié dans votre page web de destination, la vidéo va aussitôt démarrer silencieusement
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.
1 commentaires:
merci bcp mon ami
ReplyEnregistrer un commentaire