Background video with image returned for touch screens


This is the website.

The background video works on desktop. For small screens an image is displayed instead (I used CSS display property for this). But what about touch screens, like iPads, that are not small?

I tried this code:

<video id="background" width="100%" height="100%" muted autoplay loop>
    <source src="videos/video.mp4" type="video/mp4">
    <source src="videos/video.ogg" type="video/ogg">
    <img src="img/image.jpg">
    Your browser does not support the video tag.

I added a fallback image in case the browser/device doesn't recognise the video. But I think that's not the case for touch screens. I guess they do recognise the video, they just don't autoplay it.

What can I do to display a background image in devices that don't play background videos?

Any help is appreciated.

Looks like you're already using Modernizr.js - you can use it to detect touch-event support, and then respond accordingly. To target via css, use the classes that Modernizr is selectively applying to the html element.

.touch video { ... } .no-touch video { ... }

To target via js:

if (Modernizr.touch) { ... } if (!Modernizr.touch) { ... }

If you like, there are also some good libraries out there to help manage background videos - check the Media section on Unheap for a bunch of options.

Also, I'd be a little circumspect about using autoplaying background videos. They look cool, sure, but they can create some issues with performance, accessibility, load times, etc.