Атрибут height тега <video>
Описание
Атрибут height задаёт высоту области отображения видео в пикселях. Этот атрибут влияет только на отображение, не изменяя фактическое разрешение видео.
<video src="video.mp4" height="360" controls></video>
Особенности работы:
- Принимает значение в пикселях (без указания единиц)
- Сохраняет пропорции видео, если не задан width
- Может конфликтовать с CSS-стилями
- Не влияет на качество или размер загружаемого видео
Рекомендации по использованию:
| Сценарий | Рекомендация |
|---|---|
| Фиксированный размер | Используйте height с width |
| Адаптивный дизайн | Лучше использовать CSS |
| Сохранить пропорции | Указывайте только height или только width |
Пример с сохранением пропорций:
<!-- Ширина подстроится автоматически -->
<video src="video.mp4" height="240" controls></video>
Сравнение с CSS:
| Метод | Преимущества | Недостатки |
|---|---|---|
| Атрибут height | Простота, работает до загрузки CSS | Менее гибкий |
| CSS height | Больше контроля, медиазапросы | Требует загрузки CSS |
Ограничения:
- Не поддерживает относительные единицы (%, vh)
- Может быть переопределён CSS
- Не адаптируется под разные экраны
Пример адаптивного видео с CSS:
<style>
.responsive-video {
width: 100%;
height: auto;
max-height: 60vh;
}
</style>
<video class="responsive-video" src="video.mp4" controls></video>
Важно: Для современных сайтов:
- Используйте CSS для управления размерами
- Атрибут height может быть полезен для статических страниц
- Всегда тестируйте на разных устройствах
Сочетание с другими атрибутами:
<video src="video.mp4"
height="480"
width="640"
poster="preview.jpg"
controls>
</video>