« ココログのテンプレートをレスポンシブにしてみたい | トップページ | Yahoo! Pipesの代替を探す旅 »

2015年7月 2日 (木曜日)

レスポンシブにしたら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でチェックしてないや。

 ということで、もう少しこのシリーズ続きます。



|

« ココログのテンプレートをレスポンシブにしてみたい | トップページ | Yahoo! Pipesの代替を探す旅 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/61828478

この記事へのトラックバック一覧です: レスポンシブにしたらYouTube動画が欠けてしまう:

« ココログのテンプレートをレスポンシブにしてみたい | トップページ | Yahoo! Pipesの代替を探す旅 »