レスポンシブな埋め込み

デバイスの適切な縮尺を行う本質的な比率(ratio)を作成することで、 動画またはスライドショーの寸法をそれらのコンテナとなっているブロックの幅を基にブラウザが決定できるようにしてくれます。

このルールは<iframe><embed><video><object>要素に直接適用されますが、 他の属性にこのスタイルを適用させたい場合は、任意で子孫クラス.embed-responsive-itemを明示的に指定します。

助言) <iframe>frameborder="0"指定は、予め上書きされているため、これを指定する必要はありません。

<!-- 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>

 Back to top

docs CC BY 3.0

このページは、ページトップのリンク先のBootstrap公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。