Neueste Web-Entwicklung Tutorials
 

Responsive Web Design - Videos


Verwenden der Breite Property

Wenn die width Eigenschaft auf 100% gesetzt wird, wird der Video - Player ansprechen und Tonleiter rauf und runter:

Beispiel

video {
    width: 100%;
    height: auto;
}
Versuch es selber "

Beachten Sie, dass in dem obigen Beispiel kann der Video-Player skaliert werden, größer zu sein als die Originalgröße. Eine bessere Lösung, in vielen Fällen wird die zu verwenden max-width statt Eigenschaft.


Verwenden der max-width Eigenschaft

Wenn die max-width - Eigenschaft auf 100% eingestellt ist, wird der Video - Player rechnen, wenn es hat, aber nie größer sein skalieren als die Originalgröße:

Beispiel

video {
    max-width: 100%;
    height: auto;
}
Versuch es selber "

Fügen Sie ein Video zum Beispiel Web-Seite

Wir wollen ein Video in unserem Beispiel Web-Seite hinzuzufügen. Das Video wird der Größe verändert werden, um immer alle verfügbaren Platz in Anspruch nehmen:

Beispiel

video {
    width: 100%;
    height: auto;
}
Versuch es selber "