Video autoplay doesn't work without hard refresh

Question

I have a video background. It uses autoplay. Here it is:

<video muted loop autoPlay >
    <source src="assets/videos/background.mp4" type="video/mp4">
</video>

This works ONLY if the page is: 1. Hard refreshed (normal load does not work) 2. Navigated to (If I am on another page and then navigate to the home page)

If you simply navigate to the link, it doesn't work. Link: https://jackseabolt.github.io/trasher/ (please don't mess with the site)

Any thoughts about what's going on here?

Answer 1

You didn't say that using an Angular in your project. That's simple now:

<video [muted]="true" autoplay playsinline loop>
    <source src="your_video" type="video/mp4">
</video>

Just change muted attribute to [muted]="true".

Answer 2

In my case same issue happened your solution worked for me but with slight change instead of muted being in the [] replaced it to:

<video muted="true" autoplay playsinline loop>
    <source src="your_video" type="video/mp4">
</video>

And then it worked for me using it in an angular webpage.