Contao 4: Youtube Element responsive darstellen

Mit Contao 4 ist es deutlich einfacher geworden, Youtube-Videos responsive darzustellen. Alles was man dafür braucht ist ein kleiner CSS-Hack, den man auch den Youtube-Hack nennen könnte, weil es kaum einen Codeschnipsel gibt, der häufiger im Zusammenhang von Youtube und Responsive verwendet wird. Und seitdem Contao 4 nicht mehr Mediaelement.js zur Wiedergabe von Youtube-Videos verwendet, sondern ein iframe, ist es denkbar einfach geworden.

Hier die CSS-Anweisungen:

.ce_youtube {
position: relative;
padding-bottom: 56.25%;
width: 100%;
height: auto;
}

.ce_youtube iframe {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100% !important;
height: 100% !important;
}

Was diese Zeilen machen: Das iframe wird absolut positioniert und soll sich an den Dimensionen des übergeordneten Containers .ce_youtube ausrichten, in dem es von links oben bis rechts unten aufgezogen wird. 

Außerdem wird der Container .ce_youtube angepasst, der durch das Padding unabhängig von seinem Inhalt immer das Verhältnis von 16:9 hat (100% /16*9 = 56,25%). 

Durch das Zusammenspiel dieser beiden Anweisungen wird also Container im Verhältnis 16:9 erstellt, das von dem iframe genau in diesem Verhältnis ausgefüllt wird. Und fertig ist das responsive Youtube-Video.

Eine Demo kannst du dir in unserem Nutshell Framework ansehen:

Hinweis: Dadurch, dass der Container das feste Seitenverhältnis von 16:9 hat, solltest du auch keine anderen Infos wie z.B. eine Überschrift in dem .ce_youtube Container haben, da sonst der Hack nicht funktioniert.

Zuletzt aktualisiert am 07.05.2018 von Dennis Erdmann.

Zurück