title: Video hides for a second when playing in safari
body: <p>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: <a href="https://gyazo.com/cc4693840cd30fee3f61cda6082e6f7f" rel="nofollow noreferrer">https://gyazo.com/cc4693840cd30fee3f61cda6082e6f7f</a>)</p>
  <p>Also tried to play the video with 'canplay' event...
  <a href="https://gyazo.com/ad11f4c505e6be8d5606ac1eb2f72876" rel="nofollow noreferrer">Canplay</a></p>
  <p>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=&quot;auto&quot; and loading the video first in js and after a few seconds playing it with a settimeout</p>
  <p>It only happens the first time you hover the video (because it has to load)</p>
  <p>First time it happens to me</p>
  <p>Here's the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelectorAll('.work').forEach((work) =&gt; {
    work.addEventListener('mouseenter', function() {
      // this.querySelector('video').load();
      // setTimeout(() =&gt; {
        this.querySelector('video').play();
      // }, 3000);
    })
    work.addEventListener('mouseleave', function() {
      this.querySelector('video').currentTime = 0;
      this.querySelector('video').pause();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="work"&gt;&lt;video muted="" playsinline="" preload="metadata" loop="" src="https://player.vimeo.com/progressive_redirect/playback/670660302/rendition/1080p/1080p.mp4?loc=external&amp;signature=23ceaaa3a5475f94cfbe326a81c9c01ce8b02a217e54c7262bb6cf23dd3390d3" poster="http://ticklefilm.com/new/wp-content/uploads/2021/12/IMG_9660-720x1080.jpg"&gt;&lt;/video&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>