Contao: YouTube-Video responsive integrieren

Standardmäßig lässt sich in Contao ja jedes YouTube Video über ein spezielles Inhaltselement integrieren. Das Problem dabei ist u.a., dass bei der Integration die Größe einfach im Element selbst definiert wird. Bei responsive Designs lässt sich das YouTube-Video so nicht vernünftigt z.B. auf die Gerätegröße skalieren. Der folgende manuelle Weg zeigt kurz eine gute Alternative.

1. Schritt, HTML: Zunächst definiert man das YouTube-Video innerhalb eines div-Containers.

         

2. Schritt, CSS: Dann folgen die CSS-Definitionen für Container und iframe, wie folgt:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-top: 30px;
}

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Das wars schon, das YouTube-Video ist responsive. Zu sehen bspw. unter http://lueni.de/video

[contentblock id=1]

Schreibe einen Kommentar