Адаптивный веб-дизайн — видео
Использование свойства ширины
Если 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;
}