-
YouTube loop autoplay
Hey all,
You can see the following code being used on this site: http://www.brunomazereel.com
Code:
<script src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'autoplay': 1,
'controls': 0,
'autohide': 1,
'wmode': 'opaque',
'showinfo': 0,
'loop': 1,
'playlist': 'MAtwgOsycc0'
},
videoId: 'MAtwgOsycc0',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target();
$('#text').fadeIn(400);
}
$(window).scroll(function() {
var hT = $('.m-video').height(),
wS = $(this).scrollTop();
if (wS > hT) {
player.pauseVideo();
}
else {
player.playVideo();
}
});
</script>
The video starts automatically.
Now I would like another video to start straight after that one, so I adjusted this part adding another video:
Code:
'playlist': 'MAtwgOsycc0,Pq_0xbfiePs'
},
videoId: 'MAtwgOsycc0,Pq_0xbfiePs',
It works, the second video starts immediately after the first one, but now the first video doesn't start automatically anymore.
Any idea how that can be resolved, please?
Thanks!
-
This should work. Not tested though
Code:
<script src="http://www.youtube.com/player_api"></script>
<script>
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'autoplay': 1,
'controls': 0,
'autohide': 1,
'wmode': 'opaque',
'showinfo': 0,
'loop': 1,
'playlist': 'Pq_0xbfiePs'
},
videoId: 'MAtwgOsycc0',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target();
$('#text').fadeIn(400);
}
$(window).scroll(function() {
var hT = $('.m-video').height(),
wS = $(this).scrollTop();
if (wS > hT) {
player.pauseVideo();
}
else {
player.playVideo();
}
});
</script>
-
Works perfectly, thanks.
To add more videos, just continue like this:
Code:
'playlist': 'nvENEbvSMW4,gjElHVZ4f14'
},
videoId: 'MAtwgOsycc0',