How to make a better transition of

Question

I have a 10 seconds video as my wallpaper in my webpage using pure css only. Here is my code:

<style>
    video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
                }
</style>
<body>
     <video  autoplay loop poster="polina.jpg" id="bgvid">
       <source src="vidwallpaper.mp4" type="video/webm" />
       <source src="vidwallpaper.mp4" type="video/mp4 " />
    </video>
</body>

When my 10 seconds video is finished, the video repeats, back from the start and the way it started is not appealing to the eyes because the ending part of the video and the starting point of the video doesnt connect well.

Is there a way i can make a transition like fading effect so that the loop of my wallpaper will be better? tia

It seems you have a error in the source where the type is video/webm you should have a file with that extension (webm) — Luís P. A., Mar 19 '15 at 10:00
actually i dont have an error, i just want to make a better transition/repeat of my video wallpaper. — Dale, Mar 19 '15 at 10:02

score 2 · Accepted Answer · edited May 23 '17 at 12:17

The usual solution is to edit the video so that the end-to-beginning transition looks smoother. Unfortunately, on some browsers, it may pause for a second before it restarts.

See this and related questions.

To do a cross-fade, you would need two videos, or two video elements containing the same video. You'd have one play, and shortly before it ends, start the other one playing. You would have one video in front of the other, and gradually change the opacity of the front one to do the cross-fade. Then you can rewind the invisible video to get it ready for the next transition.

How to make a better transition of background in css

1 Answers1

How to make a better transition of