モーダルでYoutube動画流すことへの所感
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。
結論
から述べるとこうした方がいいと思います。
- PC 時はモーダルで表示して流す
- SP、タブレットは埋め込みプレイヤーで流す
理由
モーダルで表示するそもそもの目的は縮小されたものを拡大したり別レイヤーで表示することであり、スマートフォンなどでの携帯端末では画面領域が小さいし、別レイヤーがサイト設計とあっているのかを検討するとやる必要をそこまで感じない。
加えて携帯端末で動画を再生するのも結局は埋め込みの部分を再生するわけで。専用プレイヤーが表示されるのでモーダル表示 →YouTube 再生 → プレイヤー起動のような回りくどい動作になってしまい面倒。だとしたら最初から動画プレイヤー（もしくは Youtube アプリ）を素直に起動させたほうがいいと思う。
そもそも無理にサイト内で YouTube 動画を流す理由はあるのかというのが気になる。あり得ることならそもそもコンテンツとしてすぐ見れない位置に配置するならわかるけれども、いきなり頭に動画読み込むのとかあると正直参る。呼び出しが重いんだよ。
餅は餅屋の方式で YouTube 動画は Youtube サイトへリンク貼っとく方が素直なのでは？ と正直感じるところはあるのだが各位その辺はどうだろうか。
（というか動画というコンテンツはこの先どこまで通用するのか）
やり方
簡単です
- UA 判定でモバイル端末時はモーダル部分を id 指定でもして非表示にする
- モバイル端末時は逆に埋め込み箇所だけを表示させる
- おわり
有用そうなプラグインに関して
Lity - Lightweight, accessible and responsive lightbox
色々あるけどこれ一択じゃないかなとは思う。MIT で深く考えないで使うなら。
以上、相変わらず iframe と仲良くなれない人でした。こちらからは以上です。