Responsives Webdesign - Videos
Verwendung der width-Eigenschaft
Wenn die widthEigenschaft auf 100 % eingestellt ist, reagiert der Videoplayer und skaliert nach oben und unten:
Beispiel
video {
width: 100%;
height: auto;
}
Beachten Sie, dass der Videoplayer im obigen Beispiel auf eine Größe vergrößert werden kann, die größer als seine ursprüngliche Größe ist. In vielen Fällen ist es eine bessere Lösung,
max-widthstattdessen die Immobilie zu nutzen.
Verwendung der max-width-Eigenschaft
Wenn die max-widthEigenschaft auf 100 % eingestellt ist, wird der Videoplayer bei Bedarf verkleinert, aber niemals auf eine Größe größer als seine ursprüngliche Größe skaliert:
Beispiel
video {
max-width: 100%;
height: auto;
}
Fügen Sie der Beispielwebseite ein Video hinzu
Wir möchten ein Video in unsere Beispiel-Webseite einfügen. Die Größe des Videos wird so angepasst, dass es immer den gesamten verfügbaren Platz einnimmt:
Beispiel
video {
width: 100%;
height: auto;
}