I had made a background video for my website which worked on all browsers. But there seems to be some kind of issue with Safari browser Version 17.2.1. By default that video will be stopped and the play button will be visible (Which is not the case for other browsers).

Please check out the below snippet:

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

<!-- The video -->
<video aria-label="background-video" aria-hidden="true" preload="true" role="presentation" muted loop playsInline autoPlay id="myVideo">
  <source src="https://dl6.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm">
</video>

<!-- Optional: some overlay text to describe the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
</div>

I have given all the properties suggested by others in the community muted loop playsInline autoPlay but it does not seem to work for Safari browser Version 17.2.1.

tldr; How can i fix the issue where background video will show the play button and remains paused at the beginning (only on Safari browsers)?

If you have safari browser you can open this question (Run the code snippet) and compare it with either chrome or Firefox browsers.

There are other major websites that are facing this issue if someone needs the list i can provide them too? it’s a major one