Mp4 autoplay embed not working in chrome on reload

Hey guys,

I have a very specific problem. I have embedded a custom code to display a mp4 video in the hero section of a website. Please have a look here.

The Problem:
In Chrome (current version) everything works fine on the first visit of the site. But after a hard page reload the video doesn’t load anymore. The hero stays blank. The fallback isn’t shown either. It also happens when you visit the site, close the browser window, then revisit the site in a new window. I can’t wrap my head around any solutions. Everything I tried failed:

This is the embedded custom code:

<video autoplay playsinline>
  <source src="" type="video/mp4">
  <img src="">
  Your browser does not support the video tag.

I added the following code into the < head > tag to make the video behave like a cover image:

/* Set background video to cover */
video {
    height: 100%;
    width: 177.77777778vh; /* 100 * 16 / 9 */
    min-width: 100%;
    min-height: 56.25vw; /* 100 * 9 / 16 */
    position: absolute;
    left: 50%; /* % of surrounding element */
    top: 50%;
    transform: translate(-50%, -50%); /* % of current element */

Also I added this script which I found on stackoverflow to address the issue of not playing the video after reload. Sadly it doesn’t work:

document.addEventListener('DOMContentLoaded', function (e) {

  var promise = document.querySelector('video').play();

  if (promise !== undefined) {
      promise.catch(error => {
          console.log ("Auto-play failed")
          // Auto-play was failed
      }).then(() => {
          console.log ("Auto-play started")
          // Auto-play started

Any help is appreciated.

You should set the video as muted, and even if muted you will not be 100% sure that the video will autoplay. Autoplay policy in Chrome - Chrome Developers

1 Like

I think, that did the trick. Thank you!

Check that if in low data / low battery mode it will not start the same