What is wrong with player customization?

Question

YouTube

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;

I'm making a custom player, one succeeded, but several don't want to in this way. I
call the functions like this:

<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>

I repeat one player successfully starts and 2 does not.

Answer 1

How to dynamically add youtube players (iframe) to the page?