iOSでYoutubeのリンクを貼る際の注意事項的なお話

動画をwebページに貼付けてバックグラウンドで再生させたいときってあると思う。
その際にレスポンシブでやるとかってすごく面倒な感じだから、
モバイルからというか画面サイズが640px以下の場合はyoutubeに直接飛ばすようにするっていうのがいい感じであったりする。

ただその際にある条件下では飛ばし方に気をつけないといけないという問題がある。
ということで今日はその話をば。

上の画像は自分たちでやっているwww.partee.jpのトップページ。
ここでPCで見た場合はバックグラウンドで動画を再生、
モバイルで見ようとした場合はyoutubeに飛ばすって感じになる。
ソースコードで見るとこんな感じ。

//再生ボタン部分
<a href="#" class="play">▶︎</a>

//再生ボタンに対するイベント
var player;

$(document).ready(function(){
  $(".play").on("click",function(e){
    e.preventDefault();

    if($(window).width() <= 640){
      //window.open("https://www.youtube.com/watch?v=BiBpU8Tuzss");
      window.open("https://m.youtube.com/watch?v=BiBpU8Tuzss");
    }
    else{
      $("#moviebox").fadeIn(300);
      player.playVideo();
    }
  });
});

クリックしたらyoutubeに飛ばすって感じになる。
ただここで注意すべき点なのが、www.youtube.comではなくてm.youtube.comに飛ばすってところ。
iOSでYoutubeアプリが入っていると、wwwの場合は強制的にYoutubeアプリに飛ばされてしまうという感じである。
しかもたちが悪いことにwindow.open()でwww.youtube.comに飛ばそうとすると、
うまくYoutubeアプリが立ち上がらずにsafariのページ上でblankで表示されてしまうという問題が生じてしまう。
なんともめんどくさいなぁって感じ。

なのでモバイル向けだったりレスポンシブであるならば、
youtubeへのリンクは出し分けをしつつ、モバイル向けにはm.youtube.comに飛ばさないといけないので要注意的な。

ってことで以外と調べても誰も書いていなかったりする。
まぁそもそも普通は埋め込みとか使ってしまえば何も問題ないけど、
自分たちみたいに動画を背景で再生させたいという場合はこういう感じにしてあげないといけなかったりする。

とはいってもYoutubeの動画を背景で再生させるというところは、
モバイルの検証をやっていなかったりするからボタンを押しても何も反応がないとかが多いんだけど。。。