Background Video Not Autoplaying

Not sure if this is an issue with the local server ember generates, or if it is just a normal thing local servers do, but currently I have a video that I play in the background of my page that does not behave properly:

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

for some reason it only plays when I: A) change something in the code for the video (like deleting and rewriting "autoplay") B) generating/running an ember cli command

I also checked if it is conditionally rendered, but I don't think it is because it sits in the background of the index.hbs page. (.background-video-container and .background-video-container video are the two classes which keep it in the background)

  <div class="background-video-container">
    <WelcomeVideo class = "video background-video-container"/>
  </div>

Also, when the video plays, it does not play muted despite the muted attribute being present.

I've checked my Chrome developer tools panel and the video never shows up under the Network tab either unless I do one of those two things - which is what makes me think this might be an issue with the local server.

So far I've been trying to search for a similar issue or fix in the forums but to no avail.

Any advice, push in the right direction, similar forum question, or fix would be greatly appreciated :)

Solution

Thanks for posting your answer! and I'm glad you found something! I see now that the demo I linked you does have the same problem if I refresh the page fully.

I've updated my answer with influence from yours and updated it to be more modern.

Live Demo Here

Code:

// Videos from https://gist.github.com/jsturgis/3b19447b304616f18657
import { modifier as emberModifier } from 'ember-modifier';

const autoplay = emberModifier(element => {
  element.muted = true;
  element.play();
})

<template>
  <video playsinline autoplay loop {{autoplay}}>
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4">
      Your browser does not support the video tag.
   </video>
</template>