I'm playing some videos on mouseenter, and everything is working right on Chrome but not in Safari, here's an example of what happens: (Gif: https://gyazo.com/cc4693840cd30fee3f61cda6082e6f7f)
Also tried to play the video with 'canplay' event... Canplay
It hides itself just before playing the video... It should not jump, right after remove the poster the video should play... I've tried also with preload="auto" and loading the video first in js and after a few seconds playing it with a settimeout
It only happens the first time you hover the video (because it has to load)
First time it happens to me
Here's the code:
document.querySelectorAll('.work').forEach((work) => {
work.addEventListener('mouseenter', function() {
// this.querySelector('video').load();
// setTimeout(() => {
this.querySelector('video').play();
// }, 3000);
})
work.addEventListener('mouseleave', function() {
this.querySelector('video').currentTime = 0;
this.querySelector('video').pause();
});
});.work {
float: left;
width: calc(50% - 5px);
}
.work:before {
display: block;
content: "";
width: 100%;
padding-top: 56.25%;
pointer-events: none;
}
video {
position: absolute;
top: 0;
left:0;
width: 100%;
height: 100%;
object-fit: cover;
right: 0;
left: 0;
}<div class="work"><video muted="" playsinline="" preload="metadata" loop="" src="https://player.vimeo.com/progressive_redirect/playback/670660302/rendition/1080p/1080p.mp4?loc=external&signature=23ceaaa3a5475f94cfbe326a81c9c01ce8b02a217e54c7262bb6cf23dd3390d3" poster="http://ticklefilm.com/new/wp-content/uploads/2021/12/IMG_9660-720x1080.jpg"></video></div>