Showing an image instead of a video on mobile?

HTML-CSS
1

Hi all. When on mobile, HTML videos do not load so I am wondering how to show a static image instead.

Here is my code:

<video playsinline autoplay="autoplay" muted="muted" loop="loop" poster="https://images.pexels.com/photos/5617/red-tomato-vegetable.jpg">
	<source src="video/tomatoes.mp4" type="video/mp4">
</video>

However it isn’t working, poster is not showing anything.

Any help?

Thanks!

2

@DipperDolphin,

I tested your code inside a JSFiddle and it works. Are you sure the path to the poster image is correct?

Might also consider one of the solutions posted here

3

On what device using which browser does the video not load?

4

Yep, it works. Had no issues on a desktop view.

Tested on localhost Chrome, on my iPhone Safari, and on my iPad.

5

The iPhone and iPad should have no problems loading the video. They definitely support the container and H.264. The video does need to be encoded using device supported settings. It may have to be re-encoded. Can you link the file here so we can take a look?

6

It’s one a private GitHub repo. The link is redirect so there really shouldn’t be any issue.

7