next.js background video is not playing on Safari 15.6.1

Question

my Safari version is 15.6.1. I'm building small website project. The code works fine on chrome and firefox, but on Safari the video is frozen and shows arrow in the middle.

It's acting weird, this video is on index path -> / and when I open or refresh this page, video is frozen, but when I press button to go to -> /{every other page} and comeback to index page with another button, video starts to play.

If it matters, buttons inside have Link from next/link.

js code snipped:

    <Layout user={user}>
      <div className="hero-container">
        <video muted autoPlay loop playsInline>
          <source src="/video/video-4.mp4" type="video/mp4"/>
        </video>
    ...

css:

video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}

.hero-container {
  margin-top: 40px;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  object-fit: contain;
}

Answer 1

Apple software freezes the video when device has low power mode on. You can find more information in this post