【youtube】スマホでも自動再生＆ループをさせる

prythmworks.tokyo

HTML

<div class="main-title-wrap"></div>

jQuery

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//iframeタグとプレイヤーを作成します
var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('js-main-movie', { //js-main-movieはHTMLのid属性の値と同じ
    videoId: '2BkyGrx2F48',  //YouTubeの動画ID
    height: '1080',
    width: '1920',
    playerVars: {
      controls: 1,
      autoplay: 1,
      disablekb:1,
      enablejsapi: 1,
      iv_load_policy: 3,
      playsinline: 1,
      rel: 0,
      autohide:0,
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

//YouTube APIは↓の関数を呼び出す
function onPlayerReady(event) {
  event.target.mute();
  event.target.playVideo();
}

//プレイヤーの状態が変化するとYouTube APIは↓の関数を呼び出します
//プレイヤーが終了するとまた動画の再生をします
function onPlayerStateChange(event) {
  var ytStatus = event.target.getPlayerState();
  if (ytStatus == YT.PlayerState.ENDED) {
    player.mute();
    player.playVideo();
  }
}