HTML <video> hidden Attribute

The hidden attribute on a <video> tag hides the video player. Althought the video player is not visible, its position on the page is maintained.

Example

#

A hidden attribute on a <video> tag.
The video player is not visible.

A hidden video player:
<span>A hidden video player:</span>

<video hidden>
  <source src="/media/movie.mp4" type="video/mp4">
  <source src="/media/movie.ogg" type="video/ogg">
</video>

Using hidden

The hidden attribute hides the <video> element.

You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid.

A hidden <video> element is not visible, but it maintains its position on the page.

Removing the hidden attribute makes it re-appear.


Syntax

<a hidden>
or
<a hidden="hidden">

Values

#

Value Description
hidden Use 'hidden' or hidden='hidden'. Both are valid.

More Examples

Clicking the button toggles the hidden attribute on the <video> element.



<video id="myvideo" width="320" height="240" controls>
  <source src="/media/movie.mp4" type="video/mp4">
  <source src="/media/movie.ogg" type="video/ogg">
</video>

<br /><br />
<button onclick="toggle(this)">Hide Video</button>

<script>
  let toggle = button => {
     let element = document.getElementById("myvideo");
     let hidden = element.getAttribute("hidden");

     if (hidden) {
        element.removeAttribute("hidden");
        button.innerText = "Hide Video";
     } else {
        element.setAttribute("hidden", "hidden");
        button.innerText = "Show Video";
     }
  }
</script>

Code explanation

Initially, the <video> is visible.

Clicking the button calls JavaScript that toggles the hidden attribute.

With the hidden attribute the video player is invisible.

The video continues playing, even when hidden.


Browser support

Here is when hidden support started for each browser:

Chrome
4.0 Jan 2010
Firefox
3.5 Jun 2009
IE/Edge
9.0 Sep 2012
Opera
10.5 Mar 2010
Safari
4.0 Jun 2009

You may also like

 Back to <video>
Guides