Video hides for a second when playing in safari

Question

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

Video hides for a second when playing in safari

0 Answers