レスポンシブにしたらYouTube動画が欠けてしまう

ココログのテンプレートをレスポンシブにする話の続き。前回の話は「ココログのテンプレートをレスポンシブにしてみたい」にある。解像度の低い端末で見ると、メインカラムの幅が狭くなって貼り付けたYouTubeの一部が欠けてしまう。さてどうしよう。
というわけでJavaSciptでなんとかすることにする。参考にしたのはこれ。
Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法 – HAM MEDIA MEMO はてなブックマーク - Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法 - HAM MEDIA MEMO
試す。おお! うまくいく! すばらしい。


しかし、すでにページはいっぱいある。これらすべてのページについて、iframeタグをdivで挟むのは避けたいのである。
ということで、iframeタグ自体にJavaScriptで加工をすることに。なんとかうまくいった模様。
例として、前に作った動画を480ピクセル幅で貼ってみる。


Web MIDI API Rhythm & Bass Machine “VOCACID” / ブラウザで動くリズムマシン&ベースマシン+ポケミク用シーケンサーその1
デスクトップではオリジナルの幅で表示。デバイスのスクリーンサイズが768ピクセル未満だと、カラムの幅に合わせて拡大されるはず。これもCSSとの組み合わせで実現。
手元のスマホGalaxy S2 LTE(SC-03D)ではうまくいっている。ほかの端末ではどうだろう? そういえば、iPhoneでチェックしてないや。
ということで、もう少しこのシリーズ続きます。

コメント