Responsive Web Design - Videos
Использование свойства Width
Если свойство width имеет значение 100%, Видеопроигрыватель будет реагировать и масштабироваться вверх и вниз:
Пример
video {
width: 100%;
height: auto;
}
Обратите внимание, что в приведенном выше примере проигрыватель видеороликов может быть увеличен до размера, превышающего его первоначальный размер. Лучшим решением, во многих случаях, будет использование
Вместо этого max-width свойство.
Использование свойства max-width
Если свойство max-width имеет значение 100%, видео проигрыватель будет масштабироваться, если он должен, но никогда не масштабируется, чтобы быть больше, чем его исходный размер:
Пример
video {
max-width: 100%;
height: auto;
}
Добавление видео на веб-страницу примера
Мы хотим добавить видео в нашем примере веб-страницы. Размер видео будет всегда занимать все доступное пространство:
Пример
video {
width: 100%;
height: auto;
}