HTML <video> id Attribute

The id attribute on a <video> tag assigns an identifier to the video player. The identifier must be unique across the page.

Example

#

An id attribute on a <video> element.

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

Using id

The id attribute assigns an identifier to the <video> element.

The identifier must be unique across the page.

id allows programmatic access to the <video> element.

Tip:  id is a global attribute that can be applied to any HTML element.


Syntax

<video id="identifier" >

Values

#

Value Description
identifier A unique alphanumeric string. The id value must begin with a letter ([video-Zvideo-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.).

More Examples

A <video> element with a unique id.
The Play and Pause buttons start and stop playing the video file.



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

<br/><br/>
<button onclick="play();">Play</button>
<button onclick="pause();">Pause</button>

<script>

  let video = document.getElementById("myvideo");

  let play = () => video.play();
  let pause = () => video.pause(); 

</script>

Code explanation

The id attribute assigns a unique identifier to the <video> element.

On page load, JavaScript locates the <video> control using the id.

The Play and Pause buttons use the <video> reference to play and pause the video control.


Browser support

Here is when id 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