HTML5 Video Player: How to Embed a Video in HTML

HTML5 Video Element Explained

In HTML4 and earlier versions, video files could only be added to websites using various multimedia plugins (e.g., Adobe Flash).

HTML5 has a native video element that supports three video formats (MP4, WebM and Ogg), making it much easier to embed videos in a webpage. You can define the external source for the video using a file or a URL.

Using the HTML5 video Tag

In HTML5, you can embed a video in your webpage using a pair of <video> tags. It is also mandatory to define the source for the video. You can do it by using a simple src attribute, but it is recommended to choose the <source> tags for that:

<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  <source src="video-tag-sample.webm" type="video/webm">
  <source src="video-tag-demo.ogg" type="video/ogg">
  Video tag is not supported in this browser.
</video>

The reason this is considered a better practice is because using the <source> tags allows you to define multiple sources. The HTML5 video player supports three formats, but not all of them have the same level of browser support. This means you can add sources in different formats to ensure the user can see the video.

If the video cannot be played in any format provided, the user will see the text known as the fallback content. It is the only content within the <video> tags. Use it to provide information to the user or a direct link to the video file.

Customizing Your HTML5 Video

Video Controls

It is always recommended to add HTML5 video controls to your player. Using special buttons in the player window, the user can manually start and stop the video, skip to specific place using the slider, or toggle between window and full screen video display. To add video controls, include the controls attribute:

<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4">
  Video tag is not supported in this browser.
</video>

If the video has sound, HTML5 video controls also allow modifying the volume or muting it completely. Not only it improves the user experience, but it's also crucial for accessibility. The ability to control the playback is very important for people with disabilities (e.g., photo-sensitive epilepsy).

Player Dimensions

To define the size of your player, you can use the height and width attributes. The video will keep the same aspect ratio.

In the HTML5 video example below, the values are set to 300 for the height and 400 for the width:

<video controls width="400" height="300">
  <source src="video-tag-example.mp4" type="video/mp4" width="400" height="300">
  Video tag is not supported in this browser.
</video>

Note: specifying an exact size also helps avoid flickering during loading.

HTML5 Video Player: Useful Tips

• If you're using the <source> element, we recommend you to add the type attribute to it. This way, the browser can immediately skip a format it doesn't support without trying to play it and wasting resources.
• By including a poster attribute, you can add an image to be displayed before the video starts.
• You can style your HTML5 video player using CSS – e.g., you may modify the opacity or set borders.

Browser support

Mobile browser support