Google Chrome lässt keine Höhe auf Iframe für YouTube zu

Question

Aus irgendeinem Grund haben meine YouTube-Videos, die ich auf meiner Website eingebettet habe, keine Höhe in Chrome, Firefox, und ich nehme auch IE an. Es funktioniert in Safari seltsamerweise. Meine Website ist dynamisch, daher habe ich die Breite als Prozentsatz festgelegt. Ich habe versucht http: //, https: //, // www für die src auf dem Video, tut nichts. Auch versuchte Höhe als Auto, Setup einen Prozentsatz für die Höhe und das funktioniert auch nicht.

.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

Es funktioniert (ich fand die Seite, die Sie diese Stile von kopiert, und sie arbeiten für mich):

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