como colocar em loop eterno a exibicao de videos utilizando api youtube?
tenho script abaixo e serve que sejam exido video dentro do site utilizando a api do youtube. funciona bem, o único problema é que não consigo configurar que seja fique em loop eterno.
você saberia como fazer a configuração de forma que ao terminar o video o mesmo seja reexibido novamente e permaneça em loop eterno?
> <style>
.cover {
position: absolute;
// top: 0;
// left: 0;
z-index: 2;
width: 100%;
height: 600px;
}
.cover .hi {
position: relative;
transform: translate(-50%, -50%);
color: #fff;
font-family: 'Roboto Slab', serif;
font-size: 24px;
line-height: 26px;
text-align: center;
}
.cover .hi span {
color: #ff0;
cursor: pointer;
text-decoration: underline;
}
.cover .hi em {
font-style: normal;
}
.cover .hi em.hidden {
display: none;
}
.tv {
position: relative;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 600px;
overflow: hidden;
}
.tv .screen {
position: relative;
top: 0;
// right: 0;
// bottom: 0;
// left: 0;
z-index: 1;
margin: auto;
opacity: 0;
transition: opacity .5s;
}
.tv .screen.active {
opacity: 1;
}
</style>
<div class="cover">
<div class="hi">
<?
//echo 'Jair Batista Imóveis!<br>Ajudando a realizar seu sonho...';
?>
</div>
</div>
<div class="tv">
<div class="screen mute" id="tv"></div>
</div>
<script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/player_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var tv,
playerDefaults = {autoplay: 1, autohide: 1, modestbranding: 0, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3, loop : 1};
var vid = [
{'videoId': 'ER5sOEIt3dM', 'startSeconds': 0, 'suggestedQuality': 'hd720'},
{'videoId': 'V8NAWrKlsAU', 'startSeconds': 0, 'suggestedQuality': 'hd720'},
{'videoId': 'J57HnR6FPW0', 'startSeconds': 0, 'suggestedQuality': 'hd720'}
],
randomVid = Math.floor(Math.random() * vid.length),
currVid = randomVid;
$('.hi em:last-of-type').html(vid.length);
function onYouTubePlayerAPIReady(){
tv = new YT.Player('tv', {events: {'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange}, playerVars: playerDefaults});
}
function onPlayerReady(){
tv.loadVideoById(vid[currVid]);
tv.mute();
}
function onPlayerStateChange(e) {
if (e.data === 1){
$('#tv').addClass('active');
$('.hi em:nth-of-type(2)').html(currVid + 1);
} else if (e.data === 2){
$('#tv').removeClass('active');
if(currVid === vid.length - 1){
currVid = 0;
} else {
currVid++;
}
tv.loadVideoById(vid[currVid]);
tv.seekTo(vid[currVid].startSeconds);
}
}
function vidRescale(){
var w = $(window).width()+200,
h = $(window).height()+200;
if (w/h > 16/9){
tv.setSize(w, w/16*9);
$('.tv .screen').css({'left': '0px'});
} else {
tv.setSize(h/9*16, h);
$('.tv .screen').css({'left': -($('.tv .screen').outerWidth()-w)/2});
}
}
$(window).on('load resize', function(){
vidRescale();
});
$('.hi span:first-of-type').on('click', function(){
$('#tv').toggleClass('mute');
$('.hi em:first-of-type').toggleClass('hidden');
if($('#tv').hasClass('mute')){
tv.mute();
} else {
tv.unMute();
}
});
$('.hi span:last-of-type').on('click', function(){
$('.hi em:nth-of-type(2)').html('~');
tv.pauseVideo();
});
//# sourceURL=pen.js
</script>Discussão (0)
Carregando comentários...