レスポンシブwebデザインでYoutubeの埋め込み動画がはみ出た
多くのサイトをワードプレスで運営していますが、Twentyelevenっていうデフォルトテーマをカスタマイズして愛用しています。（当サイトは違うテーマを使用）
Twentyelevenは、スマホやタブレットなどに対応しているレスポンシブWebデザイン。
ウィンドウの幅に応じて、サイドバーが下に回ったり、画像なんかを縮小してくれたりしてとってもすごいんです。
Youtubeの動画を埋め込んだのを、私の手持ちのiPhoneで確認して見ると、サムネイルがはみ出しちゃってました。
私のiPhoneはiPhone3GSといって、3年前から使ってる古い機種。
しかもOSもiOS3と古い。
ちなみに今の現行OSはiOS6。
はみ出しちゃってても見られるんですが、できるだけ対応したい。
ちなみに、Youtubeの埋め込みコードを、「以前の埋め込みコードを使用する」にチェックを入れれば、私の古いiPhoneでも再生可能。（もちろん新しいiPhoneでも）
埋め込み動画をレスポンシブにする（はみ出さないようにする）ために調べてみると、このCSSで対応できそう。
WPtouchっていうスマホ表示用のワードプレスのプラグインも、同様のCSS使ってるっぽい？
ってことでさっそく使用させていただき、自分のiPhone3GSで確認。友達のアンドロイドでも確認して、完璧だぜ！と調子に乗ってました。
そして…
たまたまヨドバシカメラへ行ったときに、iPadとiPadminiでちゃんと表示されてるか確認してみたんです。
そしたら…動画部分が…ばっちりと…真っ白！
埋め込み動画が表示されるべき所が、ぽっかりと空白になっていました。
そして私の頭も真っ白に。
解決策として、iPadやiPadminiでは、Youtube動画をレスポンシブにするCSSが適用されないようにしました。
元の埋め込み動画の幅よりも、ウィンドウサイズが狭いときのみ（560pixel以下とか）に、画面幅に合わせるCSSを適用させたんです。
iPadminiの解像度は1024×768ピクセル。560ピクセルより大きいのでレスポンシばないはず。もとより、埋め込み動画は縮小されないので、問題ないはず。
もう一度ヨドバシへ。iPad、OK！ iPad mini、OK！
ついでにチェック、iPod、NG！、iPhone5、NG！
なん…だと…
他のアンドロイド携帯やNexus7ではOKでした。
以上から、iOS6と、Youtube動画をレスポンシブさせるCSSとの相性が悪いということだと判断しました。
解決策としては、機種（safariのバージョンとか？）によって適応させるCSSを動的に変える。ですが、どれが表示されてどれが表示されないのかすべて調べる必用があります。（大変というか無理！）
よく考えると、実際の所、Youtube動画をレスポンシブさせるCSSが無くても、古いiPhoneではみ出しちゃう以外の弊害は無いんですよね。
ということで、試行錯誤したCSSをサクッと削除しました。
古い機種に対応するためにいじくりまわして、新機種へも悪影響が出てたら元も子もないってことで。
実際、そのサイトで動画を見てもらうシーンとしては、スマホよりもタブレットを想定していますし。
youtubeも今後いろいろ変更されるだろうし、スマホのブラウザもアップデートされていくでしょう。なるべくシンプルにしておくのが一番だという結論です。
ただ、動画を多くの人に見てもらえるように、埋め込むときは「以前の埋め込みコードを使用する」で。
そしてサイトを立ち上げたら、ヨドバシカメラへ行って片っ端からタブレットをいじって確認しようと思ったのでした。
何度もヨドバシへ通わずに済むよう、テストページをいろいろ用意して行きましょう。
怪しまれないように、URLは暗記しやすいものにしておくのも忘れずに！
iPhoneやiPadでの表示を確認するのに便利なツール（エミュレーター）など
→iBBDemo3 – iPhone, iPad の表示を PC 上で行うエミュレータ
→ブラウザのサイズはそのままで、表示ページをiPad, iPhoneサイズにして確認できる -RDW Bookmarklet
※これらを使用しても、実機でどう表示されるかは実際に確認してみないと分かりません。まさにそれを体感した出来事でした。
（2013年1月24日）
この記事に関連する投稿:
