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

ココログのテンプレートをレスポンシブにする話の続き。前回の話は「ココログのテンプレートをレスポンシブにしてみたい」にある。解像度の低い端末で見ると、メインカラムの幅が狭くなって貼り付けたYouTubeの一部が欠けてしまう。さてどうしよう。
というわけでJavaSciptでなんとかすることにする。参考にしたのはこれ。
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でチェックしてないや。
ということで、もう少しこのシリーズ続きます。