The Complete Guide to Autoplaying Videos with the <video> Tag

This guide covers how to autoplay video files in browsers using the HTML <video> tag. You'll learn about autoplay-related attributes, browser policies that affect playback, and device-specific considerations.

Designed as a comprehensive resource for web developers, it explains how to implement autoplay with the video tag and offers practical solutions to common issues encountered along the way.

Understanding Autoplay Policies for the <video> Tag

Using the HTML <video> tag to autoplay videos in browsers offers a compelling way to deliver dynamic visual content. Videos provide rich storytelling and emotional connections through moving images and sound, offering valuable information more effectively than static images in a short amount of time.

However, despite these advantages, autoplay videos can cause user frustration—such as unwanted ads—and consume users’ data and network bandwidth. This is especially significant on mobile devices, where data usage and performance impacts can be more pronounced.

As a result, most major browser vendors, including Google Chrome and Apple Safari, have implemented autoplay policies aimed at improving user experience and reducing data consumption. Apple’s mobile devices also enforce autoplay restrictions based on battery-saving measures.

Failing to understand these autoplay policies may lead to unintended blocking of video playback. Therefore, grasping these guidelines is essential for successfully implementing autoplay with the HTML <video> tag.

You can find detailed autoplay policies from leading browser vendors at the following resources:

To summarize these policies:

  • Videos must be muted to autoplay, to enhance user experience.
  • Videos displayed in fullscreen mode should not autoplay.
  • On mobile devices, especially iPhones and iPads, autoplay is disabled when Low Power Mode is active due to concerns over data and battery consumption.

Based on these guidelines, the next section will cover practical methods for implementing autoplay of video files using the HTML <video> tag in browsers.

How to Autoplay Video Files in the Browser Using the <video> Tag

This section explains how to autoplay video files in modern browsers using the HTML <video> tag, while considering compatibility across major browsers.
The key is to set the required attributes correctly.

HTML Set the required attributes on the <video> tag: 
<video src="myvideo.mp4" muted autoplay playsinline></video>

Required Attributes for Autoplay

muted

This attribute mutes the video on playback.
Most browsers allow autoplay only when the video is muted.

autoplay

This instructs the browser to start playing the video automatically.
However, just adding this attribute doesn't guarantee autoplay on all browsers—autoplay behavior is subject to each browser vendor's policy.

playsinline

This tells the browser to play the video inline within the element, rather than switching to fullscreen. While the absence of this attribute doesn't always force fullscreen, iPhones often enter fullscreen mode by default when a video starts.
This is a mobile-only attribute originally introduced by Apple.

If Autoplay Still Doesn't Work...

  • Are you testing on an iOS device?
    Autoplay may not work when Low Power Mode is enabled on iPhones or iPads. There's no workaround—Low Power Mode must be turned off for autoplay to function.
  • Is the video embedded in an <iframe>?
    You need to add allow="autoplay" to the <iframe> tag. For platforms like YouTube, check their specific autoplay policies and use the correct embed parameters.

Using Autoplaying Videos as Background Visuals

Videos are often used as dynamic backgrounds to provide a richer visual experience than static images. In such cases, looping the video is usually desired.

HTML Set autoplay, muted, playsinline, and loop attributes: 
<video src="myvideo.mp4" muted autoplay playsinline loop></video>
<!-- loop: allows the video to replay automatically -->

Consider the Aspect Ratio of the Video

Every video file has its own intrinsic width-to-height ratio (aspect ratio).

If you ignore this, empty space may appear around the <video> tag, which can disrupt the layout—especially when used as a background. Make sure the video’s aspect ratio aligns well with the container element.

Specifications

Specification for the video tag
Specification
<video> HTML Standard
#the-video-element