HTML5 Video (both webm and MP4) are showing a blank white screen and aren't playing

Question

I've done an hour of googling but I either suck at it, or it isn't a common issue.

Here's my video tag:

<video class="video-background" preload="none" loop="loop" autoplay="autoplay">
    <source src="/resource/video/ripples.webm" type="video/mp4">
    <source src="/resource/video/ripples.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

No matter what order I place them in, neither the webm nor the mp4 will load, they just show a blank white screen. I'm also not getting a 404 from the server so the videos should be coming down from the server?

Appreciate any input

EDIT: We removed the preload="none" attribute and now the first frame of the video shows up, but it doesn't auto-play the rest of the video for some reason (despite having autoplay="autoplay" on the element.

Answer 1

Add a muted attribute. (Chrome. Possibly some anti-ad policy.)

(Also make sure you didn't nest <video> in <video>, which has similar outcome. But I bet on the first cause.)