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:

Download Now: Free HTML & CSS Hacks

Let’s get started.

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

HubSpot Video

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:

 
<video controls width="300">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    This browser does not support HTML video.
</video>

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.

Videos with sound should not autoplay, as this can startle viewers and distract them. It also presents an accessibility issue. In fact, Chromium web browsers do not allow autoplay of videos with sound for this reason. If you want to autoplay a video, the video should be muted whenever possible. If sound is important, you can give users the option to unmute the video.

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.

 
<video>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
</video>

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

As mentioned, do not autoplay videos with sound whenever possible. People generally don’t like when a website starts playing sound without warning. It’s okay for videos to have sound, but users should be able to opt into it either by pressing play on the video or unmuting the autoplay video.

Subtitles and Captions

Both subtitles and captions provide text alternatives to video sound. The difference is that subtitles translate the language spoken in the video to a different language, whereas captions display the spoken language, along with other information that helps viewers with hearing impairments understand 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. To learn more, Mozilla has an excellent guide on adding captions and subtitles to HTML5 video.

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.

Before HTML5, videos were inserted on pages with Flash. Of course, Flash has been almost entirely phased-out, with <video> being the newer, more convenient method to place videos. By understanding how HTML video works, you can leverage this powerful element to create rich experiences for visitors and ultimately drive more conversions through your site.

New Call-to-action

 css introduction

Originally published Jun 15, 2022 7:00:00 AM, updated June 15 2022

Topics:

HTML