Youtube IFrame Player APIでスマホで autoplayが効かない件と解決法。

少しハマったのでめもします。

Youtube IFrame Player APIを使っていて、オリジナルデザインのボタンを1タップで再生したい。
ただし、Chrome や Safari などのモバイル ブラウザでは、HTML5

$('#オリジナルボタンセレクタ').click(function(){
    //PlayerをNEW
    var player = new YT.Player('{ELEMENT_ID}',{
        videoId:'{YOUR_VIDEO_ID}',
        playerVars: {
            autoplay: 1,
        },
        events:{
            //ONReadyしたら再生
            onReady:function(){
                player.playVideo();
            }
        }
    });
});

どうにもユーザーのマウスイベント経由だけど、ダメみたい。(間にイベントの非同期準備できなところが挟まるからかも?)
以下のようにすると解決しました。

//イベントの先にplayerをnew
var player = new YT.Player('ELEMENT_ID',{
    videoId:'YOUR_VIDEO_ID',
    playerVars: {
        autoplay: 0,
        enablejsapi:1,
    },
    events:{
        onReady:function(){
            //onReadyのところでボタンイベントを準備
            $('YOUR_BTN_ID').click(function(){
                player.playVideo();
            });
        },
        onStateChange:function(e){

        }
    }
});