サイトでYoutubeアプリが自動で起動してしまうのをやめたい

Question

YouTube Player APIを使用して、サイト内にYouTube動画を再生しています。
動画はサイトにアクセスしたら、自動再生が始まる仕組みです。

PCサイト（SP最適化なし）なのですが、スマホでアクセスしたとき、
自動再生の関係か、YouTubeアプリが強制的に立ち上がってしまうそうです。
（私の環境ではそれが見られないので、現在環境は確認中です）

ただ、もし「SPの場合は自動再生をやめる」など別の方法がありましたら、教えて頂けますと嬉しいです。
YouTube Player APIでそのような設定は可能なのでしょうか？

申し訳ないのですが、JSなどプログラム系の知識が足りず、
知恵をかしていただけますと幸いです。。

下記、YouTube Player APIのコードになります。
（Wordpress使用しているためphpコードが含まれております）

<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);

	var player;
	
	function onYouTubeIframeAPIReady() {
		player = new YT.Player('player', {
			height: '200',
			width: '360',
			videoId:'<?php echo get_option('movie_id');?>',
			wmode: 'transparent',
			playerVars:{
			'loop': '1',
			'playlist':'<?php echo get_option('movie_id2');?>',
			'rel': '0',
			'showinfo': '0',
			'color': 'white',
			'autoplay': '1',
		},
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
	}
	function onPlayerReady(event) {
		event.target.playVideo();
		event.target.mute();
	}
	function onPlayerStateChange(event) {
	}
</script>

よろしくお願いいたします。

Answer 1

function onPlayerReady(event) {
        event.target.playVideo();
        event.target.mute();
    }

上記がYouTubeのAPIで再生準備が整ったタイミングで実行される関数です。
この中にif文でスマホからのアクセスのときはevent.target.playVideo();とevent.target.mute();を実行しないという処理を加えればよろしいのでは無いでしょうか。

こんな感じでしょうか。

/**
 *  ユーザーのデバイスを返す
 *  @return     スマホ(sp)、タブレット(tab)、その他(other)
 */
var getDevice = (function(){
    var ua = navigator.userAgent;
    if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
        return 'sp';
    }else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
        return 'tab';
    }else{
        return 'other';
    }
})();


function onPlayerReady(event) {
  if(getDevice === 'other'){ //スマホとタブレット以外は動画再生
    event.target.playVideo();
    event.target.mute();
  }
}

// 他の処理は省略

Comments

[sobakoo]

ありがとうございます！！こちらで理想通りの動きになりました！！
onPlayerReadyが自動再生の部分なのでここをSP・タブレット時で切り分けて頂いたんですね。
ちなみに自動再生はAndroid環境でされてしまうみたいでした。
詳しく解説して頂いて嬉しいです。本当にありがとうございます！

[chieeeeno]

onPlayerReady()がと言うよりは、

onYouTubeIframeAPIReady()内の
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}

で、'onReady'で紐付けている関数がonPlayerReadyなので、
それが実行されています。

別の関数を指定したらそれが実行されます。

ユーザーエージェントの判定は割りとテキトーに書いたので、
そこはご自身でAndroidの判定ができるように修正ください。