HTML5 videos don’t autoplay with tippy js

I use tippy.js and when I add a <video loop muted playsinline autoplay> inside a tooltip using allowHTML: true, the video won’t autoplay on chrome. It works on firefox and safari though.

How can I achieve this?

Here is my js:

const modal = card.querySelector('.modal'),
            modalContent = modal.innerHTML`

      tippy('.card', {
        content: modalContent,
        allowHTML: true,
        interactive: true,
        animation: 'shift-away',
        followCursor: true,
        arrow: false
      });

And here is my html:

<div class="modal">
   <div>
      <video loop muted playsinline autoplay>
        <source src="http://localhost:8888/artifacts/wp-content/uploads/2022/05/Artifacts-Landing.mp4" type="video/mp4"> 
      </video>
   </div>
</div>

I tried to add

card.querySelector('video').play()

but it doesn’t work eather.

Thanks a lot in advance for your help,

Answer

It is indeed strange that a muted video would not autoplay. You can use setTimeout and then trigger play() using the onShow() event. For some reason onShown() doesn’t ever fire for me.

Here’s a working snippet:

const modal = document.querySelector('.modal'),
  modalContent = modal.innerHTML;

tippy('.card', {
  content: modalContent,
  allowHTML: true,
  interactive: true,
  animation: 'shift-away',
  followCursor: true,
  arrow: false,
  onShow(instance) {
    setTimeout(() => {
      let video = instance.popper.getElementsByTagName('video')[0];
      video.currentTime = 0; //start from begining
      video.play();
    }, 1);

  },
});

.modal {
  display: none;
}

video {
  width: 40vw;
}

.card {
  padding-top: 10vh;
}

h1{
  display:inline;
  margin:1em;
}

<!-- Production -->
<h1 class="card">CARD 1</h1>
<h1 class="card">CARD 2</h1>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

<div class="modal">
  <div>
    <video loop muted playsinline autoplay>
        <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/6/6c/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm.720p.vp9.webm" type="video/mp4"> 
      </video>
  </div>
</div>