Prevent html5 video element from being loaded on touch devices.

Question

I'm currently working on making a fullscreen video background. Usually for touch devices (iPad, iPhones, etc.) I would just hide the video element with css and display an image instead.

Out of curiosity I went to see what responsive solutions different websites are using for their html5 video backgrounds. That's when I noticed that AirBnB is not loading the html5 video element at all on touch devices (I tested on iPad and iPhone, I havn't tested on android yet). If you inspect the website on a touch device you will notice that the video element is completely "gone".

So my question is, what is the best way to prevent html5 videos from being loaded on touch devices?

Preferably with php or jquery (I also have modernizr loaded to my site.).

@JayBlanchard hahaha! That's what I have been doing all the time. This would not affect loading time (by loading the video)? — lassemt, Mar 29 '16 at 19:33
If the video is not referenced in the media query it will not be downloaded. — Jay Blanchard, Mar 29 '16 at 19:33
See this post: http://stackoverflow.com/questions/24609127/what-is-the-best-way-to-remove-html5-video-background-for-mobile-users - Detect video element and hide using a media query. — Nathaniel Flick, Mar 29 '16 at 19:33

score 1 · Answer 1 · answered Mar 29 '16 at 19:32

In Javascript:

if("ontouchstart" in document.documentElement){
    var video = document.querySelectorAll("video")[0];
    var img = document.createElement("img");

    //set img attributes here

    video.parentNode.replaceChild(img, video);

}

The problem of CSS media queries is that you cannot detect touch devices directly.

score 0 · Answer 2 · answered Mar 29 '16 at 19:36

The easiest cross-browser method would be to have a placeholder element, like:

<img src="background-img.jpg" data-video-src="video.mp4" class="video-placeholder" />

You simply have a listener for clicks on your elements that have the style video-placeholder and replace with the html5 video element.

Something like:

$('body').on('click','.video-placeholder', function(event) {
  //Create video element
  var videoSrc = $(this).data('video-src');
  var video = $('<video></video>');
  video.load(function() { /*Do onload stuff*/ });
  video.attr('src',videoSrc);
  //Replace element
  $(this).replaceWith(video);
});

This is obviously a very simplified solution, but it gives you an idea how to handle it so you don't autoload a video unless the user wants to play it.

Prevent html5 video element from being loaded on touch devices.

2 Answers2