YouTube: comment présenter la vidéo embed avec son muet
j'essaye d'intégrer une vidéo avec le son muet mais je ne peux pas comprendre comment ça marche.
actuellement, je l'utilise mais ne fonctionne pas:
<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?rel=0&autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>
L'un de vous sait comment je peux faire ça?
13 réponses
mise à Jour
Ajouter &mute=1 à la fin de votre url.
votre nouveau code serait:
<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?rel=0&autoplay=1&mute=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>Vieille Réponse
vous allez devoir ajouter Javascript pour couper l'audio. Ajouter un id à votre iframe:
Puis récupérez l'id avec javascript:
var myVideo = iframe.getElementById ("myVideo"); myVideo.mute ();
Voir aussi la section mute dans la référence de L'API Youtube https://developers.google.com/youtube/js_api_reference?csw=1
et la question: Comment lire automatiquement une vidéo Youtube (API IFrame) muté?
prendre l'url source, par exemple:
puis Ajouter ?mute=1 à la fin, ainsi:
Il ya des paramètres de lecteur supplémentaires dans Google documentation .
la réponse acceptée ne fonctionnait pas pour moi, j'ai suivi ce tutoriel à la place avec succès.
en gros:
<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_policy: 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();
}
}
});
}
// Written by @labnol
</script>
C'est facile. Il suffit d'ajouter mute=1 au paramètre src d'iframe.
Exemple:
<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?ecver=1?controls=0&mute=1&showinfo=0&rel=0&autoplay=1&loop=1&playlist=uNRGWVJ10gQ" frameborder="0" allowfullscreen></iframe>
<iframe src="https://www.youtube.com/embed/7cjVj1ZyzyE?autoplay=1&loop=1&playlist=7cjVj1ZyzyE&mute=1" frameborder="0" allowfullscreen></iframe>mute=1
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ObHKvS2qSp8?list=PLF8tTShmRC6uppiZ_v-Xj-E1EtR3QCTox&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ObHKvS2qSp8?list=PLF8tTShmRC6uppiZ_v-Xj-E1EtR3QCTox&autoplay=1&controls=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
Source: https://developers.google.com/youtube/iframe_api_reference
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '720',
width: '1280',
videoId: 'M7lc1UVf-VE',
playerVars :{'autoplay':1,'loop':1,'playlist':'M7lc1UVf-VE','vq':'hd720'},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.setVolume(0);
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
done = true;
}
event.target.setVolume(0);
}
</script>
je tiens à remercier l'ami qui a posté les codes ci-dessous dans ce domaine. J'ai finalement résolu un problème auquel j'ai dû faire face toute la journée.
<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: 'xCIBR8kpM6Q', // YouTube Video ID
width: 1350, // Player width (in px)
height: 500, // Player height (in px)
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 0, // Show pause/play buttons in player
showinfo: 0, // Hide the video title
modestbranding: 0, // Hide the Youtube Logo
loop: 1, // Run the video in a loop
fs: 0, // Hide the full screen button
cc_load_policy: 0, // Hide closed captions
iv_load_policy: 3, // Hide the Video Annotations
autohide: 0, // Hide video controls when playing
rel: 0
},
events: {
onReady: function(e) {
e.target.setVolume(5);
}
}
});
}
// Written by @labnol
</script> il suffit de passer au mute=1 .
par exemple:
<iframe id="myVideo" src=https://www.youtube.com/embed/k0DN-BZrM4o?rel=0&autoplay=1;mute=1" width="100%" height="600" frameborder="0" allowfullscreen></iframe>
était également à la recherche d'une solution mais je n'ai pas inclus via iframe, le mien était lié à des images/vidéo.mp4 - trouvé ce https://www.w3schools.com/tags/att_video_muted.asp - et j'ai simplement ajouté < video controls muted > (solution CSS/HTML 5), mais pas de JS requis pour moi...
<iframe width="560" height="315" src="https://www.youtube.com/embed/ULzr7JsFp0k?list=PLF8tTShmRC6vp9YTjkVdm1qKuTimC6K3e&rel=0&autoplay=1&controls=1&loop=1" rel=0& frameborder="0" allowfullscreen></iframe>
Essayez cette
<iframe width="420" height="315" src="http://www.youtube.com/embed/
HeQ39bLsoTI?autoplay=1&cc_load_policy=1" volume="0" frameborder="0"
allowfullscreen></iframe>
n'oubliez pas d'écrire volume="0"