全幅（固定高さ）応答youtube埋め込みバナー

Question

アスペクト比に応じて埋め込みのYouTubeビデオを背景レイヤーとしてサイズ変更/拡大縮小する以下のコードが見つかりました。

https://codepen.io/dudleystorey/pen/PZyMrd

下の行は、アスペクト比に基づいて映像の変化を取り扱うように見える

@media (min-aspect-ratio: 16/9) { 
    .video-foreground { height: 300%; top: -100%; } 
} 
@media (max-aspect-ratio: 16/9) { 
    .video-foreground { width: 300%; left: -100%; } 
} 

サイズ変更/私は背景としてビデオセットを持つようにしたい場合は効果をスケーリングすることは完璧に動作しますしかし、私はビデオをdiv内で応答するようにしたい（バックグラウンドではない）

私は何を意味するのかを知るには、以下のフィドルを見てください。

https://jsfiddle.net/mhgsre0z/2/

私の問題はcodepenに行われているように私は、アスペクト比に基づいて（ズーム？）規模にビデオを得ることができないということです。したがって、より広い幅

すべてのヘルプは大歓迎であるの黒いバーに

おかげで、ビデオの両側にある垂直バーを結果！

EDIT：

ここでは、私はジャンプがどのように抜本的な削減しようとする高さ/幅に対して異なる値をテストしたブレークポイントのわずかなジャンプがあり、私が思いついたのソリューションです。

https://jsfiddle.net/84jyv3uo/

Answer 1

これはあなたの意思です。ビデオはSOのスニペットで再生されないので、JSFiddleのリンクもあります。

.content { 
 
    max-width: 100% height: auto; 
 
    text-align: center; 
 
} 
 

 
.header-unit { 
 
    height: auto; 
 
    position: relative; 
 
    padding: 0; 
 
} 
 

 
#video-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    /* 16:9 */ 
 
    padding-top: 25px; 
 
    height: 0; 
 
    border-bottom: solid 2px blue; 
 
    border-top: solid 2px blue; 
 
} 
 

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

<div class="content"> 
 
    <h1> 
 
    Content above the video banner 
 
    </h1> 
 
    <p> 
 
    I would like to have content above and below an embedded youtube video that rescales/resizes responsively eliminating the black bars at certain aspect ratios by scaling 
 
    </p> 
 
</div> 
 

 
<div class="header-unit"> 
 
    <div id="video-container"> 
 
    <iframe class="fillWidth" src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe> 
 
    </div> 
 
</div> 
 

 
<div class="content"> 
 
    <h1> 
 
    Content below the video banner 
 
    </h1> 
 
    <p> 
 
    I would like to have content above and below an embedded youtube video that rescales/resizes responsively eliminating the black bars at certain aspect ratios by scaling 
 
    </p> 
 
</div>