youtubeAPIを使用してWebサイトに動画を埋め込み

d273c265b593f35e6b2cf87cc9d9cb54-600x348

ホームページに埋め込んだyoutube動画をオリジナルにカスタマイズされたボタンで再生や停止などの制御をしたいというご依頼があり、YoutubeAPIを使用しての制作を行いました。

ご依頼のイメージとしては無印のサイトの様な感じです。

基本的な使い方については以下サイト様を参考にさせていただきました。

TAM のテクニカルチームがお届けする WEB技術ブログ!

youtubeAPIを使用して再生した際にiPhoneとiPadで動かなくなる問題

AndroidではPCの記述そのままで動画が再生されたのですが、iPhoneとiPadで再生ボタンを押すと再生されないという問題が有りました。

調べてみると、iOSではytPlayer.playVideo();の関数では再生を行えないようになっているみたいです。

iPhoneとiPadの場合はyoutubeのページに遷移して対応

解決策としては、埋め込まれたyoutube動画に表示されるもともとの再生ボタンをタップしてもらう必要があります。

a (1)

加えてytPlayer.playVideo();の関数が呼び出されないようにしましょう!
この関数が呼ばれるとリロードする以外で動画を再生する方法がなくなってしまいます。

また、以下のコードではiPhoneとiPadの場合にyoutubeのページへ移動してから再生されるように記述しています。

 補足

再生するための関数(ytPlayer.playVideo();)はiOSで実行することはできないが、動画を一時停止する関数(ytPlayer.pauseVideo();)は問題なく実行されたことを確認しています。

シェアする

  • このエントリーをはてなブックマークに追加