谷歌瀏覽器不允許YouTube上的iframe高度

Question

由於某些原因，我在我的網站上嵌入的YouTube視頻在Chrome，Firefox中沒有高度，我也假設IE也是如此。它足夠奇怪地在Safari中運行。我的網站是動態的，所以我將寬度設置爲百分比。我已經嘗試了http：//，https：//，// www for the src on the video，does not do anything。也試圖將高度作爲自動，設置高度的百分比，這也不起作用。

.video-container { 
 
    padding-bottom: 56.25%; 
 
    padding-top: 10px; 
 
    height: 0; 
 
    margin-bottom: -60px; 
 
    text-align: center; 
 
} 
 
.video-container iframe, 
 
.video-container object, 
 
.video-container embed { 
 
    position: center; 
 
    width: 80%; 
 
    height: 80%; 
 
}

<div class="video-container"> 
 
    <iframe src="http://www.youtube.com/embed/yGqXk5AHSRg" allowfullscreen></iframe> 
 
</div>

Answer 1

它的工作原理（我找到了你複製了這些風格的頁面，他們爲我工作）：

https://jsfiddle.net/tobyl/0vx4upa1/

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

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