HTML5 videos don't autoplay with tippy js

Question

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,

"It doesn't work" isn't descriptive, is there some kind of error or what exactly — Joshua, Oct 20 '22 at 09:28
@Joshua I get no error, only the video stays paused on first frame. Could it be linked to the tooltip visibility status maybe? Since the tooltip is hidden first — johangiraud, Oct 20 '22 at 09:51

Miro · Accepted Answer · 2022-10-22T09:36:50.300

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>

Thanks a lot @Miro! It's working perfectly, but it breaks when there are more than one video in the dom. I tried to replace `document.getElementsByTagName('video')[1].play();` with `card.getElementsByTagName('video')[1].play();` but i get a _cannot read properties of undefine_. If I try `card.getElementsByTagName('video')[0].play();` I get no errors, but autoplay isn't triggered. Strange cause if I console.log `card.getElementsByTagName('video')[0]`, I get the dom element in the console — johangiraud, Oct 20 '22 at 15:27
Try with `instance.popper.getElementsByTagName('video')[0].play()` That should target the video inside the current modal/tooltip. Edited the example above — Miro, Oct 20 '22 at 20:51

HTML5 videos don't autoplay with tippy js

1 Answers1