ebody: Youtube Iframe immer im 16:9 Format anzeigen - Firefox Problem

Beitrag lesen

SELF-Forum

Youtube Iframe immer im 16:9 Format anzeigen - Firefox Problem

ebody
– Informationen zu den Bewertungsregeln

Hallo,

https://codepen.io/anon/pen/OvRXEp

Egal wie man den Browser skaliert, das Video soll immer ohne schwarzen "Rahmen" oben/unten oder links/rechts im 16:9 Format gezeigt werden. Im Chrome funktioniert es, im Firefox dagegen wird es falsch dargestellt. Die Höhe ist viel zu gering.

<!DOCTYPE html>
<html>
	<head>
		<style>
			html,body { 
				margin: 0px; 
				padding: 0px; 
				height: 100%;
			}
			
			#screen{
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: 1fr;
				width: 100%;
				height: auto;
				overflow: hidden;
			}
			
			#screen iframe{
				grid-column: 1 / 2;
				grid-row: 1 / 2;
				width: 100%;
				padding-bottom: 56.25%; 
			}
			
			
		</style>

	</head>
	<body>
		<div id="screen">
			<iframe width="100%" height="100%" src="https://www.youtube.com/embed/M8M9lvjY0No?rel=0&amp;controls=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
		</div>
		<div id="footer">
			Footer
		</div>
	</body>
</html>

Ich habe schon sehr viel ausprobiert, speziell mit Höhen Angaben in den Elementen, aber im Firefox bekomme ich es einfach nicht hin. Weiß jemand Rat?

Gruß ebody

Beitrag melden
–
Informationen zu den Bewertungsregeln