HTML Video Tag

Last Updated On Sunday 22nd May 2022

html video

The <video> HTML element embeds a media player which supports video playback into the document.

	<video width="320" height="240" controls>
  <source src="cj.mp4" type="video/mp4">
</video>
	
  • The controls attribute adds video controls, like play, pause, and volume.
  • It’s always good to include width and height attributes.

html videos

The content inside the opening and closing <video> </video> tags is shown as a fallback in browsers that don’t support the element.

	<video width="320" height="240" controls>
  <source src="cj.mp4" type="video/mp4">
  Your Browser not Supports Video tag
</video>
	

html5 video how to

HTML <video> Autoplay

	<video width="320" height="240" autoplay>
  <source src="cj.mp4" type="video/mp4">
</video>
	
  • Add muted after autoplay to let your video start playing automatically
	<video width="320" height="240" muted autoplay>
  <source src="cj.mp4" type="video/mp4">
</video>
	

Some Important Video Tag Attributes

  • autoplay – A Boolean attribute, video automatically begins to play.
  • controls – It allows the user to control video playback, including volume, seeking, and pause/resume playback.
  • autopictureinpicture – A Boolean attribute , element should automatically toggle picture-in-picture mode.
  • controlslist – It helps the browser select what controls to show on the media element. Allowed values are nodownload, nofullscreen and noremoteplayback.
  • crossorigin – It indicates whether to use CORS to fetch the related video.
  • disablepictureinpicture – Prevents the browser from suggesting a Picture-in-Picture context menu.
  • disableremoteplayback – It used to disable the capability of remote playback in devices.
  • loop – The browser will automatically seek back to the start reach the end of the video.

embed video in html

Browsers Chrome Edge Mozilla Safari Opera
<video> 4.0 9.0 3.5 3.1 11.5