title: Why video opened in safari has a black border when resizing?
body: <p>I have this weird problem under safari. A mp4 video with size of 1920 * 1080, if I open it directly under safari, and resize safari to 937px width, then I got:</p>
  
  <p><a href="https://i.stack.imgur.com/oI50i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oI50i.png" alt="enter image description here"></a></p>
  
  <p>There's a black border over the video. And here's the computed style of the <code>video</code> element:</p>
  
  <p><a href="https://i.stack.imgur.com/BWCPQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BWCPQ.png" alt="enter image description here"></a></p>
  
  <p>The <code>width</code> doesn't equal to 327, but 326 - I'm not sure what's going on here.</p>
  
  <p>Then I check the same mp4 video in chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/6xD3w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6xD3w.png" alt="enter image description here"></a></p>
  
  <p>No border over the video. And here's the computed style for <code>video</code> element under chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/9OBOH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9OBOH.png" alt="enter image description here"></a></p>
  
  <p>I thought <code>object-fit: cover</code> might fix it in safari, but it didn't.</p>
  
  <p>What can I do to fix it under safari now? Any suggestion?</p>
  
  <h2>Edit</h2>
  
  <p>Here's a gif showing what I got:</p>
  
  <p><a href="https://i.stack.imgur.com/5DKWv.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5DKWv.gif" alt="enter image description here"></a></p>