divを使用せずにiframeを反応的にするにはどうすればよいですか？

Question

は私が

<div class="intrinsic-container"> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe> 
</div> 

が <div>...</div>を使用せずに、私の記事（で直接 <iframe>...</iframe>を埋め込むことが可能であり、このポスト例えば、iframeの周りのクラスにコンテナを追加することにより、応答のiframeを作る（ Making an iframe responsive）から学びました）？そして私はこれらのソリューションを試しましたが、それらのすべては機能しません。

PS：私はワードプレスに2列のレイアウトを使用しています。ビデオの比率は16：9（YouTubeから）、4：3（Tencentから）などとすることができます。ここには一時的なdemoがあります。

Answer 1

余分なラッパー要素なしで実行可能なビューポート単位を使用できる場合。

全ページ幅：

iframe { 
 
    width: 100vw; 
 
    height: 56.25vw; /*16:9*/ 
 
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>

ハーフページ幅：

iframe { 
 
    width: 50vw; 
 
    height: 28.125vw; /*16:9*/ 
 
}

<iframe width="560" height="315" src="https://www.youtube.com/embed/I4YoBuJCbfo" frameborder="0" allowfullscreen></iframe>

Answer 2

iframeに応答するためにブートストラップクラスを使用します。

<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" allowfullscreen 
      src="//www.youtube.com/embed/zpOULjyy-n8?rel=0" > 
    </iframe> 
</div> 

Answer 3

ここで重要なのは、高さと幅の比あなたです守りたい私はこれを行うには、javascriptの代わりにjQueryを使用する自由を取った。ボタンをクリックするとコードがトリガされます。 iframeの幅と高さの比率を計算し、必要に応じて調整します（この場合、コンテナの幅を埋めると仮定しました）。

複数のページがある場合は、すべての動画をループして、ウィンドウのサイズ変更とページの読み込みでコードを実行します。ここで

はJSFiddle

はそれが役に立てば幸い:)

HTML

<iframe id="iframe" width="640" height="360" src="https://www.youtube.com/embed/4SDVkdcO8ts" frameborder="0" allowfullscreen></iframe> 
<button id="button" style="float: left">Click me!</button> 

jQueryのこのためブートストラップを使用して

$(document).ready(function(){ 
    $("button").click(function(){ 
    var ratio = $("#iframe").height()/$("#iframe").width(); 
    $("#iframe").width("100%"); 
    var newWidth = $("#iframe").width(); 
    $("#iframe").width(newWidth); 
    $("#iframe").height(newWidth*ratio); 
    $("button").text("resize the window and click me again!"); 
    }); 
});