My webpage features a unique 10-second video wallpaper achieved using only pure CSS. Below is the code I used:
<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>
After my 10-second video finishes, it starts again abruptly, causing a disjointed experience for viewers as the ending and beginning do not flow seamlessly. Is there a way to implement a fading transition effect to enhance the wallpaper loop? Thanks in advance.