var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function youtubeStyle(player,playerID,videoID) {
onYouTubeIframeAPIReady = function () {
player = new YT.Player(playerID, {
height: '620',
width: '350',
videoId: videoID, // youtube video id
playerVars: {
'autoplay': 0,
'rel': 0,
'showinfo': 0
},
events: {
'onStateChange': onPlayerStateChange
}
});
}
onPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.ENDED) {
$('.start-video').fadeIn('normal');
$('.play-icon').fadeIn('normal');
}
}
$('.start-video').click(function() {
$(this).fadeOut('normal');
$(this).children().fadeOut('normal');
player.playVideo();
})
$('.play-icon').click(function() {
$(this).fadeOut('normal');
$(this).parent().fadeOut('normal');
player.playVideo();
})
}
var video = new Array;
Делаю кастомный плеера, один удалось а несколько таким способом не хочет
Вызываю функции вот так как ниже
<div class="video-abs start-video">
<img src="../img/pl-ic.png" alt="" class="play-icon start-video">
</div>
<div id="play-1">
<script>
$( document ).ready(function() {
youtubeStyle(video[1],'play-1','SMVHbKgV3Y4');
});
</script>
</div>
повторюсь один плеер успешно запускается а 2 нет.