HTML Video: The Beginner's Guide

HTML Videos, what are they, and how do you use them? It’s not a secret that videos are a powerful way to engage website visitors and draw them into your content. Whether it’s a piece of featured content meant to educate or a full-screen background meant to decorate, videos are one of the best ways to elevate a website.

That’s why HTML5 introduced the video element, a simple way to embed video content into a web page. HTML video is easy to use and includes built-in functionality to customize how your video works on the page. In this post, we’ll tell you what you need to know about using this HTML element, including:

• how to embed videos
• attributes of the HTML video element
• how to use the <source> element with HTML video
• some important accessibility considerations when embedding videos

Let’s get started.

Here’s what the video element looks like when placed on a page:

How to Embed Video in HTML

To embed a video in an HTML document, use the <video> tag inside the body of the document. Here’s an example:

See the Pen HTML video: example by HubSpot (@hubspot) on CodePen.

Let’s break down this example:

First, the video tag needs to specify the source of the video. This can be done by either using the src attribute in the opening <video> tag (as shown above), or by placing one or more <source> tags inside the <video> tag, like so:

Using <source> tags is ideal if you want to include the same video in multiple formats to ensure cross-browser compatibility. When multiple <source> tags are used, the browser will display the video in the first compatible format listed.

I’ve also specified a width and a height for the video element in pixels to ensure the video displays in the dimensions I want, and I’ve included the controls attribute to let the user pause, play, and adjust the volume of the video.

You’ll notice there’s some text nested in the <video> element as well. Any text placed between the opening and closing <video> tags appears only if the video element is not supported by the browser. In this case, the text displays in place of a video player.

Finally, note that <video> is an inline element by default, but it’s common to change this to a block-level element using the display property in CSS. Doing this might make it easier to work the video into an existing page layout.

HTML Video Attributes

We’ve already covered some attributes of HTML video in the example above. Here, we’ll review all the main attributes you should know to use this element effectively.

autoplay

The autoplay attribute makes the video play without user input, as soon as the video content is loaded and ready. This behavior is common for websites that use video backgrounds that start right when the page loads.

Autoplaying videos with sound is not recommended, as it can startle and distract viewers, and it can also create accessibility issues. In fact, Chromium web browsers do not allow autoplay of videos with sound for this reason. If you want to autoplay a video, it is best to mute the audio whenever possible. If sound is important for the video, you can provide users with the option to unmute it.

Like several other HTML video attributes, autoplay is a Boolean attribute, meaning it can only be true or false. To use the attribute, simply include autoplay inside the opening <video> tag.

controls

controls is another Boolean attribute that, if included, displays controls in the video player that let the user toggle playback, volume, etc.

loop

When the loop attribute is included, the video will restart automatically after reaching the end, and repeat this indefinitely.

muted

The muted attribute mutes the video audio. This is highly recommended for autoplaying videos that have sound. If controls are included, the user can unmute the video.

playsinline

The playsinline attribute makes the video play inside the context of the web page. This is the default behavior on desktop browsers. However, on mobile browsers, the video will play in full-screen mode. playsinline prevents this from happening.

poster

poster specifies an image that is shown in the video area before the user starts the video. If the poster attribute is not included, the browser will show the first frame of the video as the poster image.

preload

preload is an attribute used with the <video> and <audio> elements. It tells the browser what data can be loaded before the video plays in order to save on load time. It accepts one of the following values:

• auto: The browser can load the entire video when the page initially loads.
• metadata: The browser can load only video metadata when the page initially loads.
• none: The browser should not load the video when the page initially loads.

src

The src attribute specifies the source of the video. A source must be specified for each <video> element, either with src or using a <source> element nested within <video>.

width and height

These attributes set the width and height of the video display in pixels (percentages are not allowed). Including a width value and/or a height value avoids content that shifts as the page loads.

HTML5 Video Source

The <video> element supports three video formats: MP4, WebM, and Ogg. However, not every web browser supports all three of these formats.

To be sure that your video content displays properly across browsers, you can specify multiple video sources with the <source> tag. Nest your <source> tags inside the <video> element, and the browser will play the first compatible format.

HTML Video Accessibility

When embedding any type of media, it’s important to consider accessibility best practices that allow users with impairments, limitations, and disabilities to engage with your content to the same extent as other users. Here are some things to keep in mind for creating accessible video content.

Sound

Avoid automatically playing videos with sound whenever feasible. Users typically dislike when a website unexpectedly starts playing audio. While videos can have sound, users should have the option to manually start the video or unmute the autoplay feature.

Subtitles and Captions

Subtitles and captions serve as textual alternatives to the audio in videos. While subtitles translate the spoken language in the video to a different language, captions not only display the spoken language but also provide additional information to assist viewers with hearing impairments in understanding the content.

For a video to be accessible, it must include captions. The most common method for adding captions to HTML video is by using the <track> element with the WebVTT standard.

Video vs. Audio

It’s also possible to play audio files with the <video> element. This is a common way to add subtitles or captions to audio content, since the native HTML <audio> element does not allow for timed text.

However, when embedding audio, it’s almost typically best to use <audio> to provide a better experience for those using screen readers.

Push play on HTML video.

Gone are the days of embedding videos with Flash. With the introduction of HTML5, the <video> element has become the go-to method for placing videos on web pages. By mastering the ins and outs of HTML video, you can harness the power of this versatile element to create immersive experiences for your visitors and drive conversions on your site.