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