Background video with image fallback for touchscreens

Question

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.
</video>

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.

Possible duplicate of: http://stackoverflow.com/questions/7120703/how-do-i-detect-if-the-html5-autoplay-attribute-is-supported — Siguza, Jan 23 '15 at 17:23

score 3 · Accepted Answer · answered Jan 23 '15 at 17:27

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.

I'm not sure what Modernizr is. I have it because I'm using Boilerplate. Thanks for the help, I'll work on that tonight. — Gonçalo, Jan 23 '15 at 17:48

score 0 · Answer 2 · answered May 13 '15 at 21:35

I'm a little late to the party here.

The Modernizr approach is probably best for detecting touchscreens, but it seems you don't actually care if the device is touch or not. You want to target devices with small screens, most of which happen to be touchscreen. However, there are desktop touchscreens, so touch-detection isn't a very accurate to target small devices.

You can target small screens, touch or not, very easily with media queries.

@media (max-width: 600px) {
    #myvideo {
         display: none;
    }
}

Background video with image fallback for touchscreens

2 Answers2