0

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;
}
rumcajs
  • 129
  • 1
  • 10

1 Answers1

0

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

rumcajs
  • 129
  • 1
  • 10
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/33082388) – chrslg Nov 06 '22 at 16:55