1

I am using a background video for my page which is a simple long page where you scroll and see pictures with a video in the background fixed. In chrome it works smooth but for some reason in safari it's a little choppy and laggy. Is there any general best practices when dealing with fixed background videos and safari? Here is how I am grabbing the video and my css properties. Any good tips or resources to look into for this would be greatly appreciated! I can go more in depth if needed or specific if this questions is too broad let me know! 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%);
}
Dave Valles
  • 27
  • 6

1 Answers1

2

Part of it is probably that you're rendering the video with an opacity of less than 100%. This takes more time to render. Consider making it without the filter, as those cause lag too. I would suggest removing the line:

filter:opacity(60%);

There are, of course, other problems, like the video loading slowly. If you do not need to change the video often, and you made the video, you can download it from Vimeo using an external downloader such as SaveVideo.me and embedding it using the video tag:

<video autoplay muted loop>
    <source src="rain.mp4" type="video/mp4">
</video>

Of course, if you want audio, remove the "muted" and if you don't want loop remove "loop" tag.

<div id="container">
    <div id="overlay">a</div>
    <div id="video">
        <video autoplay muted loop>
            <source src="rain.mp4" type="video/mp4">
        </video>
    </div>
</div>

And then use CSS to overlay them:

#container {
    width: 100px;
    height: 100px;
    position: relative;
}
#overlay,
#video {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#video {
    z-index: 10;
}

Sources:
SaveVideo.me
W3Schools
Alex's Post on Overlaying Divs

Michael Rothkopf
  • 118
  • 2
  • 8
  • I kind of want to make the opacity work. Are there potential work arounds for making it look like the video has that opacity? like putting something on top of it? Also yeah I own the videos and have mp4, would using the .mp4 make it faster? – Dave Valles Jan 03 '20 at 23:26
  • I updated the answer to include these. Yes, using the mp4 would be much faster, as it doesn't have to load every time the page loads. – Michael Rothkopf Jan 04 '20 at 01:35