ブートストラップフレームワークを使用してレスポンシブWebページを開発していますが、レスポンシブiframeを配置したいと思います。
ブートストラップドキュメントでは、レスポンシブ16x9アスペクト比のiframeを使用して、
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="…"></iframe>
</div>
そして、css（bootstrap.cssに含まれる）は
.embed-responsive
{
display: block;
height: 0;
overflow: hidden;
position: relative;
}
.embed-responsive.embed-responsive-16by9
{
padding-bottom: 56.25%
}
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object
{
border: 0 none;
bottom: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
その結果、iframeのコンテナは（クラス「embed-responsive ...」のdiv）はレスポンシブです。これには、解像度に応じた正しい幅と高さが必要です。ただし、iframeはサイズ変更されないため、オーバーフローします。
divを正確に埋めるようにiframeのサイズを変更するにはどうすればよいですか？
回答：
回答№1の場合は7私もこの問題を抱えていました。ややハックの解決策を見つけました。 iframeセクションで： width:100% 次のようになります。
<iframe class="embed-responsive-item" src="…" width="100%"></iframe>
iframeソースが反応しないため、身長に固定値を設定する必要がありました。
希望が役立ちます。
回答№2の場合は1
このためにboostrapを使用できますが、これを支援するためのフレームワークは必要ありません。チェックアウト レスポンシブiframe;フレームワークを使用せず、ネイティブjavascriptで記述されています。
回答№3の場合は0
クライアントに埋め込みビデオをどこにでも追加したかった特別なマークアップやコンテナを追加する必要なく、サイト内で。このjQuery関数は、ページ上のすべてのiframeをレスポンシブにし、CSSを変更せずにビデオも処理します。デフォルトのアスペクト比は16：9ですが、4：3ビデオを使用するか、独自のアスペクト比を追加する場合はアスペクト比を変更できます（携帯電話で作成される垂直方向のビデオコンテンツを知っています）。
https://gist.github.com/dylanvalade/b2ba4eaa99ae7968cfd8