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

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

  1. 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.
    1. Lieber Matthias,

      • Der zusätzliche Container für den Iframe ist wohl überflüssig.

      durch meine Beschäftigung mit eingebetteten YouTube-Videos komme ich zu der Einsicht, dass dieser Container keineswegs überflüssig ist, da eine dynamische Größenanpassung mit dem iframe selbst offensichtlich sehr schwierig bis unmöglich ist (eine oft gelesene Erfahrung), während eine responsive Gestaltung über einen Container dagegen sehr gut gelingt.

      Liebe Grüße,

      Felix Riesterer.

    2. @@Matthias Apsel

      <!DOCTYPE html>
      <html>
      	<head>
      

      hier fehlen das title- und meta-viewport-Element.

      sowie die Angabe der Sprache des Inhalts. Siehe Warum man Sprachattribute verwenden sollte

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

      Und in allen™ anderen Fällen gilt: nicht px verwenden, sondern em bzw. rem (wenn nicht % oder v…)

      (Übern Daumen: durch 16 teilen; bswp. 320px20em bzw. 20rem.)

      border-width: 1pxborder-width: thin

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. Hallo und vielen Dank an alle,

        mit diesem Code funktioniert es: https://codepen.io/anon/pen/OvRXEp

        <!DOCTYPE html>
        <html>
        	<head>
        		<style>
        			html,body { 
        				margin: 0px; 
        				padding: 0px; 
        			}
        			
        			#screen{
        				position: relative;
        				height: 0;
        				overflow: hidden;
        				padding-bottom: 56.25%
        			}
        			
        			#screen iframe{
        				position: absolute;
        				top:0;
        				left: 0;
        				width: 100%;
        				height: 100%;
        			}
        		</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>
        

        Grid schien für diesen Zweck nicht zu funktionieren. Grid und position oder float in einer Box zu verwenden, macht keinen Sinn und wäre falsch oder?

        Gruß ebody

        1. @@ebody

          Hallo und vielen Dank an alle,

          Du bedankst dich für Hinweise, ignorierst sie aber völlig‽

          mit diesem Code funktioniert es:

          Was immer „es“ sein mag, deine Seite kannst du damit nicht meinen.

          Was alles nicht funktioniert:

          • responsiv
          • bookmarken (zu Favoriten/Lesezeichen hinzufügen)
          • Darstellung als Browsertab
          • Ausgabe in Screenreadern
          • Silbentrennung
          			#screen{
          				position: relative;
          				height: 0;
          				overflow: hidden;
          				padding-bottom: 56.25%
          			}
          			
          			#screen iframe{
          				position: absolute;
          				top:0;
          				left: 0;
          				width: 100%;
          				height: 100%;
          			}
          

          Ich bin gewiss der letzte, der sagt, dass man keine IDs zum Stylen verwenden sollte.

          Aber was, wenn du mehrere Video auf einer Seite haben möchtest?

          Hier ist eine Klasse für den Videocontainer angebracht.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Lieber Gunnar,

            			#screen{ [...] }
            

            Ich bin gewiss der letzte, der sagt, dass man keine IDs zum Stylen verwenden sollte.

            Aber was, wenn du mehrere Video auf einer Seite haben möchtest?

            auch wenn nur ein einziges Video angezeigt werden sollte, so finde ich "screen" einen ungünstigen Bezeichner. Für mich hat das immer mit Ausgabemedium zu tun. Für die Dinge, die beim Ausdruck nicht auf's Papier sollen, verwende ich screen als Klassenname (@media print { .screen {display:none;} }).

            Mein Vorschlag: #player oder #youtube-player

            Liebe Grüße,

            Felix Riesterer.

          2. Hi,

            es handelt sich hier einfach um einen kurzen, groben Beispiel Code der das Problem bzgl. meiner Frage darstellen soll. Wie man sieht, funktioniert "es" - die Darstellung des Videos im 16:9 Format auch im Firefox, obwohl der Code nicht perfekt ist. Das finde ich auch wichtig zu erkennen.

            Bedankt habe ich mich, weil ich es zu schätzen weiß, dass Leute hier (u.a. Du) gute Tipps geben. Nur weil ich hier jetzt die Hinweise nicht umsetze, bedeutet das ja noch lange nicht, dass ich sie mir nicht merke und bei einer finalen/echten Seite berücksichtige.

            Bzgl. responsive funktioniert nicht - welchen Browser hast du verwendet? Ich habe es im Chrome, Firefox, IE Edge ausprobiert, egal wie ich das Browserfenster skaliere, das Video wird immer sauber, rahmenlos dargestellt.

            LG ebody

            1. Hallo ebody,

              Bzgl. responsive funktioniert nicht - welchen Browser hast du verwendet? Ich habe es im Chrome, Firefox, IE Edge ausprobiert, egal wie ich das Browserfenster skaliere, das Video wird immer sauber, rahmenlos dargestellt.

              Damit mobile Browser das ordentlich darstellen können, sollte das meta-viewport-Element nicht fehlen.

              Bis demnächst
              Matthias

              --
              Rosen sind rot.