Play function does not work in iOS browser

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

I put 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 note the updates I've been doing in this code.

I've done 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 on the click element.

cursor:pointer;

That would be enough to fix the bug of iOS. From what I'm researching this is just a bug . Now whether or not it is, I do not know for sure.

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

On top of the video you have a div with a PLAY button, which by clicking on it div exits the top of the video and starts playback.

Even on my mobile android 4.2 this video works. Less on iPhone 4 and 4s iOS.