How to play a video automatically on my website

• March 5, 2024

I searched for a long time to find out how to automatically play a video on my HTML5 website, on mobile and desktop, before finding the answer. I’ll give it to you below.
For Youtube and Vimeo, it’s easy though.

How to autoplay a Youtube or Vimeo video automatically on my website

It’s very easy. The procedure is identical for Vimeo and Youtube.

However, one thing you need to know is that videos that play automatically on a website will necessarily play without sound. It’s a good idea to think about adding subtitles to your video.

1. Take the Embed code from the Youtube video. It looks like this
   <iframe width="560" height="315" src="https://www.youtube.com/embed/OeDlSjmNGbY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
2. At the end of the video URL, add ?&autoplay=1&mute=1. This will make the URL look like @https://www.youtube.com/embed/OeDlSjmNGbY?&autoplay=1&mute=1
3. Copy and paste this code into the HTML of your web page

How to autoplay an HTML5 video automatically on my website

However, one thing you need to be aware of is that videos that play automatically on a website will inevitably play without sound. It’s a good idea to think about adding subtitles to your video.

Upload your video and audio files

In real terms, the technique is to take an HTML5 video, set subtitles by default, and play it in autoplay. We also put a div over it to activate the sound if the user clicks on it.

To see an example that works, click here.

<video id="video" autoplay muted playsinline loop onClick="this.pause(); this.muted=false; this.play();">
	<source src="XXXXX.mp4" type="video/mp4">
	<track label="English" kind="subtitles" srclang="en" src="clickthrough.vtt" default>
</video>
<style>
	video::cue {
		font-size: 150%;
	}
	video {
		width:100%;
	}
</style>

<div onClick="document.getElementById('video').muted=false; document.getElementById('video').pause();document.getElementById('video').play();"
	style="    z-index: 999;
    position: absolute;
    width: 100%;
    height: 700px;
    top: 0px;" >

<div>