web-dev-qa-db-ja.com

bootstrap）でレスポンシブiframeにサイズを設定します

ブートストラップでサイズをインフレームに設定することは可能ですか？

私は次のようにiframeを設定しました：

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

そして、私はこれで最大の高さを450ピクセルに設定しようとしました：

.embed-responsive {
   max-height:450px;
}

これはまったく効果がありませんでした。ヒントを教えていただけますか？小さいながらも応答性の高いiframeを実現するにはどうすればよいですか？

csstwitter-bootstrapiframe
11
Dominik Stürzer

私は同じ問題を抱えていて、.embed-response divの周りに行とcol-sm-8（必要なサイズに応じて）を追加することで解決しました。

<div class="row">
  <div class="col-sm-8">
    <div class="bs-example" data-example-id="responsive-embed-16by9-iframe-youtube">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="" allowfullscreen=""></iframe>
      </div>
    </div>
  </div>
</div>
15
Lxske

Bootstrap 4 use class='embed-responsive' の代わりに class='embed-responsive-item'。それはうまくいくはずです。 ソース

0
Nikos