Bootstrap 3.2のresponsive embedは何気に便利である。

Bootstrapのresponsive embedは何気に便利である。Youtubeの動画を貼りつけるとモバイル画面だとうまく縮小してくれないが、それをうまい具合に縮小してくれるのが、responsive embed機能である。この機能を使用するには、

1. Youtubeの動画<iframe>を <div>で囲む
2. <div>のclass属性にembed-responsive embed-responsive-16by9(動画のアスクペクト比が16:9)もしくはembed-responsive embed-responsive-4by3(動画のアスクペクト比が4:3)指定する。
3. <iframe>のclass属性にembed-responsive-itemを付加する。

効果はブラウザの横幅を狭くしていただければ下のサンプルで一目瞭然だ。

responsive embedあり

responsive embedなし

これを行うためのCSSテクニックはWeb上に転がっているけれども、それをライブラリ化したということだろう。便利に使わせてもらっている。