讓YouTube嵌入式iframe視頻完全適合div，沒有黑條？

Question

如果我有以下標記：

<div class="video-wrapper"> 
    <iframe src="link/to/video" frameborder="0"></iframe> 
</div> 

和造型：

.video-wrapper { 
    height: 100vh; 
    width: 100vw; 
} 

如何獲得video顯示全在divwidth和height，而不必是對那些黑網吧頂部和/或側面，無論長寬比如何？

Answer 1

事情是這樣的：

.video-wrapper { 
    position:relative; 
    padding-bottom:56.25%; /* aspect ration for 16:9 */ 
    /*padding-top: 20px;*/ /* you can add padding-top if needed */ 
    height:0; 
    overflow:hidden; 
} 

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

這將使響應您的視頻的所有屏幕。

Answer 2

添加類的幀標籤

<div class="video-wrapper"> 
    <iframe class="vid" src="link/to/video" frameborder="0"></iframe> 
</div> 

然後在CSS中高檔它使用轉換屬性和隱藏視頻包裝類溢出

.video-wrapper{ 
    overflow:hidden; 
} 

.vid{ 
transform: scale(2.5); 
}