Адаптивный веб-дизайн - Видео

Использование атрибута width

Если свойство width установлено на 100%, видеоплеер будет автоматически подстраивать свои пропорции под размер экрана:

Пример

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

Попробуйте сами »

Обратите внимание, что в приведенном выше примере видеоплеер автоматически подстраивает свои пропорции под размер экрана и может быть больше исходного размера. В большинстве случаев вместо этого можно использовать атрибут max-width.

Использование атрибута max-width

Если для свойства max-width задано значение 100%, видеоплеер будет автоматически подстраивать свои пропорции под экран, но не превысит свой исходный размер:

Пример

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

Попробуйте сами »

Добавление видео на веб-страницу

Мы можем добавить видео на веб-страницу. В следующем примере видео автоматически подстраивается под размер области div и заполняет всю область div:

Пример

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

Попробуйте сами »
Другие расширения