YouTubeの360度VR動画をwebに埋め込む時のスマフォ・タブレット対応

webサイトにYoutubeの360度VR動画を埋め込むと、PCだとそのまま見れるのですが、スマフォとタブレットのブラウザ再生だと対応してないので、スマフォとタブレットでifreamをクリックしたら、アプリに飛ばすようにしました。

sample.html

<a href="[Youtube VR動画URL]">
    <div class="player">
        <iframe id="vr_iframe" width="560" height="315" src="" frameborder="0"></iframe>    
    </div>
</a>

script.js

/*ユーザーエージェント判定でスマホ・タブレットはVR動画のiframe内のクリックを無効にする */
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0) && (ua.indexOf('Mobile') > 0) || ua.indexOf('Windows Phone') > 0) {
    $('#vr_iframe').css('pointer-events','none');
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
    $('#vr_iframe').css('pointer-events','none');
}else{}

iframe内クリックを無効にすれば、アンカータグのリンクが有効になるので、スマホ/タブレットで動画をクリックすると、「"Youtube"で開きますか？」のメッセージが出現し、アプリで開けば360度VR動画を再生できます。