Muted video fails to autoplay when inserted into HTML via Javascript

Issue

I am trying to insert a HTML5 <video> element through Javascript, but it fails to autoplay despite it being muted.

Background Context

I would like to transfer all of my gif assets over to mp4 format. Likewise, I would like to have the HTML video emulate a gif. It should include the following properties:

• Be muted
• Autoplays as soon as the webpage loads
• Loop indefinitely
• Plays in line

I am currently on Chrome 100.

What I've Tried

Relevant code is held within this codepen. I want to add the HTML video dynamically through javascript. But this fails to autoplay even though both autoplay and muted attributes are specified.

However, if I have the video element with the same attributes directly written within the HTML, the autoplay functionality works just fine.

---

How do I insert the video with JS and get it to autoplay?

Solution

I think you could rather set attributes like this :

const anchor = document.querySelector('#anchor');
const vid = document.createElement('video');
anchor.appendChild(vid);
vid.autoplay = true;
vid.loop = true;
vid.muted = true;
vid.playsinline = true;
vid.src = 'https://www.w3schools.com/html/mov_bbb.mp4';

Try to make these modifications. If it still not working, you could add this inline after above code :

vid.play()

Answered By - Théo Champion