Google ChromeはYouTubeのiframeで高さを許可していません

Question

何らかの理由で私のウェブサイトに埋め込んだYouTube動画はChrome、Firefoxで高さがなく、私もIEを想定しています。それは奇妙なことにSafariでうまく動作します。私のウェブサイトは動的なので、幅の設定はパーセンテージです。私はビデオ上のsrcに対してhttp：//、https：//、// wwwを試しましたが、何もしません。また、高さをautoとして試したところ、高さのパーセンテージを設定しても動作しませんでした。

.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%; 
}