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

Beitrag lesen

Hallo ebody,

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?

Zu deinem Problem nicht, es könnte auch einfach ein Firefox-Bug sein. Zu deinem Code möchte ich dir dennoch ein paar Hinweise geben.

<!DOCTYPE html>
<html>
	<head>

hier fehlen das title- und meta-viewport-Element. siehe <https://wiki.selfhtml.org/wiki/HTML/Dokumentstruktur und Aufbau#Grundgerüst einer HTML-Datei>

		<style>
			html,body { 
				margin: 0px; 
				padding: 0px; 
				height: 100%;
			}

0px ist dasselbe wie 0pc, nämlich 0. Die Einheit kannst du in diesem Fall weglassen

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

Wenn ich grid richtig verstehe, sollten zusätzliche Breitenangaben oder Innenabstände, wie du sie verwendest überflüssig sein.

	<body>
		<div id="screen">
			<iframe width="100%" height="100%" src="youtube"></iframe>
		</div>
		<div id="footer">
			Footer
		</div>
  • Der zusätzliche Container für den Iframe ist wohl überflüssig.
  • Die Angabe der Abmessungen gehört ins CSS.
  • Darfst du youtube-Videos auf diese Weise einbinden?
  • Verwende für einen footer das footer-Element.

Bis demnächst
Matthias

--
Rosen sind rot.