html5 video: once the video is loaded, a flash is appeared. how to remove it?

Question

I am using html5 and while the video is downloading I am using a fallback image in poster attribute. but the problem is once the video is downloaded a flashy screen is showing for a short period of time. how can I remove this, so that the flash will not visible?

<video class="bg-video" loop="" muted="" autoplay="" playsinline="" poster="https://i3.ytimg.com/vi/Zs0bsagDzw8/maxresdefault.jpg">
  <source />
</video>

live site:

https://nordic.dnscheck.io/

Answer 1

If you mean the black frame, it's in your video so you should edit it out from there.

If you really can't edit that file anymore you can still kind of workaround that by using the media fragment syntax and make your video automatically seek to after that black frame:

 <video muted loop autoplay poster="https://nordic.dnscheck.io/bilder/poster.webp" src="https://nordic.dnscheck.io/nordic.webm#t=0.8" ></video>

However beware that the black frame will still be here at the next loop.

Also, while it's not an issue for you since you do autoplay the video, one should note that (currently) setting the seeking time through the media fragment syntax will disable the poster once the video has loaded.