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 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>