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

Описание

Атрибут hidden скрывает элемент <video> на странице, делая его невидимым для пользователя. Видео остается в DOM, но не отображается и не занимает место в верстке.

Пример использования:
<video hidden src="video.mp4"></video>

Особенности работы:

  • Эквивалентен CSS-свойству display: none
  • Видео остается доступным для JavaScript
  • Может быть показано через JavaScript удалением атрибута
  • Не влияет на загрузку видеоресурсов

Сравнение с другими методами скрытия:

Метод Видимость в DOM Занимает место Доступно для JS
hidden Нет Нет Да
visibility: hidden Да (пустое место) Да Да
opacity: 0 Да (прозрачное) Да Да

Практическое применение:

<video id="bgVideo" hidden autoplay muted loop src="background.mp4"></video> <button onclick="toggleVideo()">Показать/скрыть видео</button> <script> function toggleVideo() { const video = document.getElementById('bgVideo'); video.hidden = !video.hidden; } </script>

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

  • Используйте для временного скрытия видео
  • Для фоновых видео лучше использовать CSS-позиционирование
  • Комбинируйте с preload="none" для оптимизации
  • Учитывайте, что скрытое видео может продолжать загрузку

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

  • Не останавливает загрузку видеоресурсов
  • Не паузит воспроизведение (нужно делать вручную)
  • Может быть переопределено CSS
Важно: Не используйте hidden для:
  • Сокрытия важного контента (виден в исходном коде)
  • Обхода автовоспроизведения (браузеры могут блокировать)
  • Оптимизации загрузки (используйте preload)