ビデオのiframeの高さを調整する

Question

私はWYSIWYGのテキストエディタとしてTinyMCEを使用しているので、タグなしでiframeが作成されます。私がオンラインで使っているソリューションはすべて、特定のタグでiframeを調整するためにjQueryを使用していますが、ページ上のすべてのiframeをどのように調整できますか？私はwidth: 100%のCSSを使ってみましたが正しく動作しますが、height: autoを追加するとそれに合わせて調整されません。

タグなしiFrameの高さをページの幅に合わせて自動的に調整できるようにするにはどうすればよいですか？

Answer 1

これをCSSで指定する方法はありません。iframeを絶対的な高さに解決する必要があります（また、iframeのコンテンツはiframeのサイズに調整されます）。

あなたが埋め込んだ動画のアスペクト比が一定であるという点で何を埋め込んだことは、比較的予測可能である場合は、ここでiframe上ラッパーdivを使用して、代替だ：

HTML

<div class='video-wrapper'> 
    <iframe ...></iframe> 
</div> 

CSS

.video-wrapper { 
    position: relative; 
    height: 0; 
    padding-bottom: 56.25%; 
} 

.video-wrapper iframe { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

ラッパーdivのpadding-bottomプロパティでアスペクト比を接続します。式はvideo_height/video_width * 100で計算されます。たとえば、16：9のアスペクト比のビデオは9/16 * 100 = 56.25%です。

今、厄介な部分はTinyMCE内でラッパー<div>を取得しています。これは、基本となるHTMLを編集しない限り不可能です。代わりにjQueryを使用してdiv内のすべてのiFrameをラップすることがあります。

$('iframe').wrap('<div class="video-wrapper"></div>'); 

希望します。