Youtube iframe "boucle" ne fonctionne pas
j'ai essayé d'utiliser le démo du lecteur YouTube pour générer le code nécessaire pour que ma vidéo s'automatise et se boucle. Mais seulement l'autoplay fonctionne, il ne Boucle pas, et la démo-vidéo ne fonctionne pas non plus. Voici le code que j'ai utilisé.
<iframe class="embed-responsive-item" id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3" frameborder="0" allowfullscreen>
</iframe>
4 réponses
Essayez d'ajouter le playlist
paramètre avec la boucle. Pour la sélection, définissez sa valeur comme l'id de la vidéo courante.
<iframe class="embed-responsive-item"id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3&playlist=M7lc1UVf-VE"
frameborder="0" allowfullscreen></iframe>
actuellement, le paramètre loop ne fonctionne que dans le lecteur AS3 lorsqu'il est utilisé en conjonction avec le paramètre playlist. Pour boucler une vidéo, définissez la valeur du paramètre boucle à 1 et définissez la valeur du paramètre Sélection à l'ID vidéo déjà spécifié dans l'API du lecteur. URL:
http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID
Reference:https://developers.google.com/youtube/player_parameters#loop
'playlist': '<?php echo $youtube_video ?>'
à l'intérieur de playerVars.
Par exemple un code complet:
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height:'100%',
width: '100%',
fitToBackground: true,
videoId: '<?php echo $youtube_video ?>',
playerVars: {
'autoplay': 1,
'controls': 0,
'autohide':1,
'enablejsapi':1,
'loop':1,
'disablekb':1,
'fs': 0,
'modestbranding': 0,
'showinfo': 0,
'color': 'white',
'theme': 'light',
'rel':0 ,
'playlist': '<?php echo $youtube_video ?>'
},
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute();
player.setVolume(0);
//player.setSize(1920, 1080);
player.setLoop(true);
player.setPlaybackQuality('hd1080');
}
votre code Html:
<div id="player"></div>
Si vous voulez garder la vidéo dans une variable, utilisez ceci:
<?php $youtube_video='C0DPdy98e4c';?>
je viens de comprendre: vous avez besoin de la liste de lecture="" pour utiliser la boucle
src="https://www.youtube.com/embed/peSfCy7HFrM?playlist=peSfCy7HFrM&loop=1;rel=0&autoplay=1&controls=0&showinfo=0 "frameborder=" 0 " allowfullscreen>
réponse acceptée n'a pas fonctionné pour moi non plus. Contournement pour septembre 2018 (bonus: définir la largeur et la hauteur par CSS pour #yt-wrap
au lieu de coder en dur elle en JS):
<div id="yt-wrap">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="ytplayer"></div>
</div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
width: '100%',
height: '100%',
videoId: 'VIDEO_ID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute(); // comment out if you don't want the auto played video muted
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.seekTo(0);
player.playVideo();
}
}
function stopVideo() {
player.stopVideo();
}
</script>