ページ全体の幅をiframeの幅で表示する

Question

iframeはフルサイズ（100%）で、ビデオはフレーム内で非常に小さい（高さ）ですが、YouTubeのiframeを使用して自分のサイトに動画を投稿しました。コンテナの幅に合わせるにはどうすればいいですか？コード

：

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5m_ZUQTW13I" frameborder="0" allowfullscreen></iframe> 

を参照してくださいスクリーンショット

Answer 1

では、次の設定を使用することができますチューブビデオの全幅を作ると高さを維持する（と応答それを維持）します。

ビデオ

<div class="videoWrapper"> 
    <!-- Copy & Pasted from YouTube --> 
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe> 
</div> 

CSS

.videoWrapper { 
    position: relative; 
    padding-bottom: 56.25%; /* 16:9 */ 
    padding-top: 25px; 
    height: 0; 
} 
.videoWrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

Answer 2

有するHTML問題はIFRAMEとビデオは、それがアスペクト比に基づいて比例正しい高さを取得するイメージのようにスケーリングすることができないことです高さをデフォルトのままにしておけばよい。

解決策は、ビデオの幅と高さを調べ、100％の画面幅で高さを計算する方法です。 1920x1080だと仮定すると、ビューポートの幅（vw）を使ってこのようなことができます。あなたは文字通り画面いっぱいにしたくない場合は、100vwをより良いものに減らすことができます。

iframe{ 
width: 100vw 
height: calc(100vw/1.77); 
} 

Answer 3

フルスクリーン属性を使用します

#myFrame{ 
position:relative; 
top:0; 
left:0; 
width:100%; 
height:100%;