Youtube Element in Contao responsive darstellen

Wir schreiben das Jahr 2024 und trotz aller Bemühungen das Web besser zu machen, werden Youtube-Videos immer noch nicht automatisch responsive dargestellt. Das liegt aber weniger an Contao und stattdessen an der Tatsache, dass die Videos über eine iFrame eingebunden werden. Und dieses iFrame kann sich zwar in der Breite anpassen, aber nicht in der Höhe.

Es gibt aber 2 CSS-Tricks, um Youtube Videos in Contao dennoch responsive hinzubekommen, sodass sich Breite und Höhe auf kleineren Bildschirmen automatisch anpassen:

1. Seitenverhältnis über aspect-ratio festlegen

Seitdem die CSS Eigenschaft aspect-ratio von allen modernen Browsern unterstützt wird, ist es denkbar einfach geworden, Youtube-Videos zu für Smartphones und Tablets anzupassen.

Hier die CSS-Anweisungen für Contao 5:

.content-youtube figure {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.content-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

Wenn du allerdings Videos mit unterschiedlichen Seitenverhältnissen hast, dann kann du in Contao schon seit längerem auch das Seitenverhältnis im Element festlegen und so mit einem zusätzlichen Container + CSS-Klasse arbeiten (vielen Dank Kim für den Hinweis!).

Für das Verhältnis 16:9 in Contao 5 sehen die Anweisungen dann so aus:

.content-youtube figure {
  position: relative;
  width: 100%;
  height: auto;
}

.aspect--16\:9 {
  aspect-ratio: 16 / 9;
}

*/ 
hier kannst du weitere Seitenverhältnisse
nach dem obigen Schema anlegen
*/

.content-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

CSS-Anweisungen für Contao 4:

.ce_youtube .video_container {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}
 
.ce_youtube iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

Für das Verhältnis 16:9 in Contao 4 sehen die Anweisungen dann so aus:

.ce_youtube .responsive {
  position: relative;
  width: 100%;
  height: auto;
}

.ce_youtube .ratio-169 {
  aspect-ratio: 16 / 9;
}

.ce_youtube iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

2. Seitenverhältnis mit padding-bottom Hack

Aber auch bevor es aspect-ratio gab, gab es schon Tricks, um Youtube-Videos im Seitenverhältnis 16:9 darzustellen. Hier die Anweisungen für Contao 4:

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

.ce_youtube iframe {
  position: absolute;
  inset: 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 .video_container 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.

Diesen und viele weitere CSS-Tricks findest du in unserem Nutshell Framework. Das Nutshell Framework ist ein Basis-Framework mit dem du schneller Contao Projekte umsetzen kannst.