youtubeAPIを使用してWebサイトに動画を埋め込み
ホームページに埋め込んだyoutube動画をオリジナルにカスタマイズされたボタンで再生や停止などの制御をしたいというご依頼があり、YoutubeAPIを使用しての制作を行いました。
ご依頼のイメージとしては無印のサイトの様な感じです。
基本的な使い方については以下サイト様を参考にさせていただきました。
目次（読みたい所をクリック!!）
youtubeAPIを使用して再生した際にiPhoneとiPadで動かなくなる問題
AndroidではPCの記述そのままで動画が再生されたのですが、iPhoneとiPadで再生ボタンを押すと再生されないという問題が有りました。
調べてみると、iOSではytPlayer.playVideo();の関数では再生を行えないようになっているみたいです。
iPhoneとiPadの場合はyoutubeのページに遷移して対応
解決策としては、埋め込まれたyoutube動画に表示されるもともとの再生ボタンをタップしてもらう必要があります。
加えてytPlayer.playVideo();の関数が呼び出されないようにしましょう！
この関数が呼ばれるとリロードする以外で動画を再生する方法がなくなってしまいます。
また、以下のコードではiPhoneとiPadの場合にyoutubeのページへ移動してから再生されるように記述しています。
// 再生
$('#play').click(function() {
if(playerReady) {
// iphoneとipadの場合
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
document.location = "https://www.youtube.com/watch?v=0wT4SmE7dx8";//youtubeページへ遷移
}else{
ytPlayer.playVideo();
}
}
});補足
再生するための関数（ytPlayer.playVideo();）はiOSで実行することはできないが、動画を一時停止する関数（ytPlayer.pauseVideo();）は問題なく実行されたことを確認しています。