title: Videos not loading after refreshing website or installing PWA on Safari (iOS and macOS)
body: <p>I'm building a Next.js <code>next@9.5.4</code> app (hosted on vercel) and need to show a background video served from the <code>/public/*</code> directory on the homepage. The background video works fine on all browsers and devices except Safari (both on iOS and macOS).
  When the video file is being served form <code>/public/*</code> directory it loads fine whenever the page first loads but whenever you refresh the website  or install the PWA the video doesn't load anymore and it only displays the video poster.</p>
  <p>However, when loading a video served from a different provider like cloudinary or AWS S3 the video loads as expected on every device and browser.</p>
  <p>At first, I thought it was an issue with <code>next-pwa</code> caching but when disabling pwa functionality I get the same &quot;bug&quot;.</p>
  <p>Here are the links to a repo I made to recreate the issue and to the deployed sample on vercel:</p>
  <ul>
  <li><a href="https://github.com/esanchezvz/next-bg-video" rel="nofollow noreferrer">Github project</a></li>
  <li><a href="https://next-bg-video.vercel.app/" rel="nofollow noreferrer">Deployed to vercel</a></li>
  </ul>