無法根據設備自動調整YouTube的播放器的尺寸

Question

我是新的HTML，CSS，JS等試圖自動調整大小的YouTube窗口，以適應設備的屏幕，但它不適合我。 我已經嘗試了很多在這個網站給出的解決方案，似乎沒有任何工作。 這裏是代碼爲視頻部分

HTML

<div class="wrapper"> 
     <div class="h-iframe"> 
      <iframe class="center-block" src="https://www.youtube.com/embed/Npa-z3P1FTY" frameborder="0" allowfullscreen></iframe> 
     </div> 
</div> 

CSS

.h_iframe iframe { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
} 

.center-block { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

.wrapper { 
    position: relative; 
    width: 100%; 
} 

Answer 1

這就是我使用的。

/* Flexible iFrame */ 
 

 
.flexible-container { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    padding-top: 30px; 
 
    height: 0; 
 
    overflow: hidden; 
 
} 
 

 
.flexible-container iframe, 
 
.flexible-container object, 
 
.flexible-container embed { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<!-- Responsive iFrame --> 
 
<div class="flexible-container"> 
 
<iframe src="https://b922bde52f23a8481830-83cb7d8d544f653b52d1a1621f05ea9d.ssl.cf3.rackcdn.com/video/landingpage.mp4" frameborder="0" style="border:0"></iframe> 
 
</div>

live link

Answer 2

Fiddle

你鴕鳥政策需要調用.h_iframe iframe中，然後，在下面，調用.center_block（這是您的iframe中類的名稱）以及：

iframe{ 
    width: 100%; 
}