Responsive Webdesign - Videos

width Eigenschaft verwenden

Wenn width Wenn die Eigenschaft auf 100% gesetzt ist, wird der Videoplayer auf die Größe reagieren und vergrößern oder verkleinern:

Beispiel

video {
  width: 100%;
  height: auto;
}

Probieren Sie es selbst aus

Bitte beachten Sie, dass der Videoplayer im obigen Beispiel größer als seine ursprüngliche Größe werden kann. In vielen Fällen ist eine bessere Lösung der Einsatz der Eigenschaft max-width.

max-width Eigenschaft verwenden

Wenn max-width Wenn die Eigenschaft auf 100% gesetzt ist, wird der Videoplayer proportional verkleinert, aber niemals größer als seine ursprüngliche Größe vergrößert:

Beispiel

video {
  max-width: 100%;
  height: auto;
}

Probieren Sie es selbst aus

Video in der Beispiel-Webseite hinzufügen

Wir möchten in der Beispiel-Webseite ein Video hinzufügen. Das Video wird so angepasst, dass es immer den gesamten verfügbaren Raum einnimmt:

Beispiel

video {
  width: 100%;
  height: auto;
}

Probieren Sie es selbst aus