Атрибут style тега <video>

Описание

Атрибут style позволяет задавать CSS-стили непосредственно для элемента <video>. Эти стили применяются только к данному конкретному видеоэлементу.

Пример использования:
<video src="presentation.mp4" style="width: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);" controls> </video>

Популярные CSS-свойства для видео:

Свойство Пример Описание
width 100%, 640px Ширина видеоэлемента
border-radius 8px, 50% Скругление углов
box-shadow 0 2px 8px #00000020 Тень вокруг элемента
object-fit cover, contain Как видео заполняет контейнер

Пример адаптивного видео:

<video src="video.mp4" style=" width: 100%; max-width: 800px; height: auto; display: block; margin: 0 auto; background: #000; " controls> </video>

Рекомендации:

  • Используйте для разовых стилевых правок
  • Для сложного оформления применяйте CSS-классы
  • Избегайте дублирования стилей
  • Тестируйте на разных устройствах

Ограничения:

  • Нет поддержки медиазапросов
  • Нельзя использовать псевдоклассы (:hover)
  • Трудно поддерживать при массовом использовании

Сравнение с CSS-классами:

Критерий Атрибут style CSS-классы
Приоритет Высокий Средний
Повторное использование Нет Да
Поддержка медиазапросов Нет Да

Пример с наложением элементов:

<div style="position: relative;"> <video src="background.mp4" style=" width: 100%; position: absolute; top: 0; left: 0; z-index: 1; " autoplay muted loop> </video> <div style="position: relative; z-index: 2;"> Контент поверх видео </div> </div>
Важно: Чрезмерное использование встроенных стилей:
  • Усложняет поддержку кода
  • Увеличивает размер HTML-документа
  • Нарушает принцип разделения структуры и оформления

Лучшие практики:

<!-- Хорошо: стили вынесены в CSS --> <video class="responsive-video" src="video.mp4" controls></video> <style> .responsive-video { width: 100%; max-width: 800px; border-radius: 8px; } </style>