禁用YouTube上的黑條嵌入iFrame

我將YouTube上的視頻嵌入到我的網頁中我希望它在屏幕上無黑條地伸展100％。雖然我給它的寬度爲100％，但視頻邊上仍然有一些黑條。我怎樣才能擺脫它？禁用YouTube上的黑條嵌入iFrame

<div id="video"> 
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q?autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
</div> 

#video { 
    height:100%; 
    width:100% !important; 
    background-size:100% 100%; 
    position:relative; 
    overflow:hidden; 
}

有一個關於這一個問題，但它基本上沒有幫助我。

來源

2017-05-13 Umit Apari

的可能的複製[無黑邊全屏響應YouTube視頻？]（http://stackoverflow.com/questions/26617154/responsive-fullscreen-youtube-video-with-no -black-bars） – mehulmpt

您希望將視頻絕對定位在包裝中，該包裝設置與視頻寬高比匹配的垂直填充。要獲得填充/寬高比，請將視頻的高度除以寬度並乘以100得到一個百分比。

* {padding:0;margin:0;box-sizing:border-box;} 
 
#video { 
 
\t position: relative; 
 
\t padding-bottom: 56.25%; /* 16:9 */ 
 
\t height: 0; 
 
} 
 
#video iframe { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

<div id="video"> 
 
\t \t <iframe width="100%" height="100%" src="https://www.youtube.com/embed/zWAiQJvwb8Q? autoplay=1&loop=1&controls=0&rel=0&showinfo=0&playlist=zWAiQJvwb8Q&modestbranding=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
 
</div>

來源

2017-05-13 15:32:28

這正是我想要的，非常感謝！ –

@UmitApari不客氣。 –

禁用YouTube上的黑條嵌入iFrame

回答

相關問題