YouTubeなどの動画をiframeで埋め込んでレスポンシブにしたい。自力で何とかしないとだめかと思っていたんだけど、Bootstrapには方策が用意されていたので覚え書き。
|
1 2 3 4 5 6 7 8 9 |
<!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."></iframe> </div> <!-- 4:3 aspect ratio --> <div class="embed-responsive embed-responsive-4by3"> <iframe class="embed-responsive-item" src="..."></iframe> </div> |
参考サイト
Components · Bootstrap
http://getbootstrap.com/components/#responsive-embed