iframeで埋め込んだYouTube動画をスマホで自動再生させたい

前提

以下のサイトを参考にしました
https://newsite-make.com/youtube-auto-play/

実現したいこと

YouTubeの仕様でスマホからアクセスした場合は自動再生がオフになりますが、
Javascriptでスマホからのアクセスでも自動再生をさせたいです

###試したこと

以下のコードを使いました

・HTML

・CSS
.movieWrap{
position: relative;
padding-bottom: 56.25%; /* アスペクト比16:9の場合 /
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 2rem; /
YouTubeの下に余白をつける */
}

.movieWrap iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

・Javascript
//<script>タグを生成
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: 'TY_eL4FyFSA', //aqa9h-nL-TAはYouTubeの動画ID
height: '360',
width: '640',
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();
}
}

発生している問題・エラーメッセージ

PCからのアクセスでは自動再生されるが、スマホからのアクセスでは自動再生されない

お手数おかけしますが、解決策をご教示いただけますと幸いです。

コメントを投稿

0 コメント