CSS & Layout

Webdesign Grundkurs – HTML & CSS

In diesem Grundkurs erlernen Sie alle notwendigen Kenntnisse zum erstellen Ihrer eigenen Homepage. Die Sprachen HTML und CSS bilden dafür die Basis. Nützliche Werkzeuge, die das Erstellen Ihrer Homepage erleichtern, werden ebenfalls vorgestellt.

Weiterlesen …

Da sich Youtube-Videos am einfachsten per iframe einbetten lassen, ist die responsive gestaltete Website schnell gar nicht mehr so richtig responsive. Dieses Problem läßt sich durch einen CSS-gestylten Container beseitigen. Dazu wrappt man das iframe-Element mit einem div-Container folgendermaßen:

<div class="video-container-name">.....</div>

und stylt den Container mit folgenden CSS-Anweisungen:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Das Ergebnis könnt Ihr hier ausprobieren (einfach das Browserfenster verkleinern):