Bootstrapのresponsive embedは何気に便利である。Youtubeの動画を貼りつけるとモバイル画面だとうまく縮小してくれないが、それをうまい具合に縮小してくれるのが、responsive embed機能である。この機能を使用するには、
- Youtubeの動画
<iframe>
を<div>
で囲む <div>
のclass
属性にembed-responsive embed-responsive-16by9
(動画のアスクペクト比が16:9)もしくはembed-responsive embed-responsive-4by3
(動画のアスクペクト比が4:3)指定する。<iframe>
のclass
属性にembed-responsive-item
を付加する。
効果はブラウザの横幅を狭くしていただければ下のサンプルで一目瞭然だ。
responsive embedあり
responsive embedなし
これを行うためのCSSテクニックはWeb上に転がっているけれども、それをライブラリ化したということだろう。便利に使わせてもらっている。