Currently, I have implemented a background video on my webpage, which features a simple layout where you scroll to view images with a fixed background video. While it works smoothly on Chrome, I have noticed that it appears choppy and laggy on Safari. Are there any best practices to follow when dealing with fixed background videos on Safari? Below is the code snippet for how I am embedding the video and the corresponding CSS properties. Any advice or resources on optimizing this for Safari would be greatly appreciated. Feel free to ask for more details or specifics if needed. Thank you!
<iframe id="v0" src="https://player.vimeo.com/video/318621793?background=1&autoplay=1&loop=1&byline=0&title=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>#v0{
position:fixed;
width: 100vw;
filter:opacity(60%);
height: 100vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}