Youtube Iframe responsive einbinden

Hallo,

ich versuche gerade einen Youtube Player responsive zu gestalten:

https://www.hfn-media.net/filmproduktion_karlsruhe.html

Auf einem Desktop sieht es noch OK aus, auf einem Handy wird nur der mittlere Teil angezeigt.

Hat jemand eine Idee, wie ich den Player weiter optimieren kann?
Er sollte halt überall mit dem korrekten 16:9-er Seitenverhältnis angezeigt werden:

Das Video wurde durch einen Contao Youtube-Player integriert und dies ist der CSS-Code:

.ce_youtube iframe {

width:100% !important;
height:100%
position: absolute;
top: 0;
left: 0;

}

Vielen Dank für euren Ratschläge.

Gr. I.

Schau mal hier:
https://css-tricks.com/fluid-width-video/

In Contao 4.9 kann man das dann auch im YT-Inhaltselement einstellen.

Vielen Dank!

Diese Installation ist leider noch 4.4.X
Besteht hier die Möglichkeit ein Youtube-Player so einzubetten, dass das 16:9 Seitenverhältnis auf allen Endgeräten korrekt dargestellt wird?

Gr. I.

Ja, mit CSS wie im Artikel von CSS Tricks beschrieben.

Es gibt auch deutschsprachige Seiten. Suche nach „(YouTube) Videos responsive”.

https://erdmann-freunde.de/wissen/ti...be-responsive/

Zitat:

---

Zitat von derRenner

https://erdmann-freunde.de/wissen/ti...be-responsive/

---

Vielen Dank, es hat gut funktioniert!

LG

I.

Die Variante, die Planepix beschrieben hat, funktioniert auch, wenn man mehrere Videos untereinander setzen will.

CSS-Code für Contao angepasst:

.ce_youtube {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
}
.ce_youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Moin,

wer den IE nicht mehr unterstützen muss, kann auch aspect-ratio verwenden. 2 weitere Zeilen begrenzen die maximale Breite des Players und zentrieren ihn horizontal.

Code:

---

.video_container {
    position: relative;
    aspect-ratio: 16 / 9;
    width: min(100vw, 40rem); /* limit the player width to 40rem */
    margin-inline: auto; /* horizontal centering */
}
.video_container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

---

Browserunterstützung aspect-ratio: https://caniuse.com/mdn-css_properties_aspect-ratio
Browserunterstützung margin-inline: https://caniuse.com/mdn-css_properties_margin-inline
Browserunterstützung min(): https://caniuse.com/css-math-functions

Gruß
Mathias