CODEWITHSUNDEEP
csshtmlhtml5-video
Dale
Dale

Reputation: 159

How to make a better transition of <video> background in css

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

Upvotes: 5

Views: 7277

Answers (1)

aldel
aldel

Reputation: 6748

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.

Upvotes: 2

Related Questions