Play function does not work in iOS browser

Question

These functions below are from the Youtube API for viewing videos. It’s working on all browsers. But when I open the site on iPhone and click on PLAY to start the video, it doesn’t perform the action.

Placed click, touchstart and tap. None of the three work.

function onYouTubePlayerAPIReady(){
    player = new YT.Player('video-estoria-animada', {
        videoId: document.getElementById('video-id').value,
        playerVars: { 
            modestbranding: 1,
            version: 3,
            controls: 2,
            wmode: 'opaque',
            theme: 'light',
            rel: 1,
            showinfo: 1,
            html5: 1,
            listType: 'playlist',
            list: "PLA8fGhdnBVrGSjEYeCPozWTXGhRX2rdJ7",
        },
        events: {
            'onReady' : onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });

    $(document).ready(function(){
        var clickDeviceEvent = 'ontouchstart' in window ? 'touchstart' : 'mousedown';

        //Estória animada play
        $('#video.estoria-animada > div.play-video').on(clickDeviceEvent, function(e){
            e.stopPropagation(); 
            e.preventDefault();
            player.playVideo();
        });

        $('#video-shadow').on(clickDeviceEvent, function(){
            player.pauseVideo();
        });

        //faz a mudança do tipo de video
        $('#change-legenda > div').on(clickDeviceEvent, function(){
            $('#change-legenda > div').removeClass('active');
            $(this).addClass('active');

            // Pega o tempo atual do video para setar ao trocar
            var currTime = player.getCurrentTime();

            if($(this).is('.sem-legenda')){
                player.loadVideoById($('#video-id').val(), currTime);
                player.unMute();
            }else{
                player.loadVideoById($('#video-id-muted').val(), currTime);
                player.mute();
            }
        });
    });
}

function onPlayerReady(event){
    player.addEventListener('onStateChange', onPlayerStateChange);
}

function onPlayerStateChange(event){
    var evento = event.data;
    if(evento == YT.PlayerState.PLAYING || evento == 1){
        $('#video.estoria-animada > div.play-video').addClass('hide');
        $('#video-shadow').delay(100).fadeIn(500);
    }
    else if(evento == YT.PlayerState.PAUSED || evento == 2){
        $('#video-shadow').delay(100).fadeOut(500);
    }
}

---

Just to mention the updates I’ve been making in this code.

I did a lot of research with the term: click Event Ios not Working. And I read most of the results. Many of them suggested putting the following property in the element of click.

cursor:pointer;

That would be enough to fix the bug iOS. What I’m searching for is nothing more than a bug. Now whether or not it is, I don’t know for sure.

I updated the code above also with what is currently. Explaining what happens:

On top of the video is a div with a button PLAY, that by clicking on it the div get off the video and start playback.

Even on my cell phone android 4.2 works that video. Less on iOS iPhone 4 and 4s.