Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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.

The markup seems to be correct. If I test it in chrome with webm jsfiddle.net/35cRY . My quess something wrong with your video. How did you convert it? I have good experience with: online-convert.com – Anatol Jun 26, 2014 at 12:47 Thanks, had this same issue and adding muted worked for me. Oddest thing, the video would play in the preview in our CMS, but not on the live site. – Fireflight Oct 17, 2019 at 21:32

I ran into a very similar issue where the solution ended up being the fact that I was providing a string with "px" when it expected a number for width and height. Took me FOREVER to catch the mistake and just showed a blank screen.

// BLANK WHITE SCREEN + HAIR PULLING
<video width="200px" height="300px" controls>
   <source...
// WORKING VIDEO PLAYER
<video width="200" height="300" controls>
   <source...

Hope this helps others.

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.