Disable HTML5 Video Download at CSS Breakpoint

Disable html5 video download at CSS breakpoint

Your video playing automatically is due to the "autoplay" attribute in the tag.

So you want the video autoplay depending on the window size when loaded. So you can add the attribute manually, like below:

$(function() {

    // onload
    if(document.body.clientWidth >= 870) {
        $('video').attr('autoplay', true);
    }

    // If you want to autoplay when the window is resized wider than 780px 
    // after load, you can add this:

    $(window).resize(function() {
        if(document.body.clientWidth >= 870) {
            $('video').attr('autoplay', true);
        }
    });
});

Prevent HTML5 videos from downloading the files on mobile - videojs

Based on the suggestions Ian kindly made, here is my working solution.

Firstly, I changed each video's child source elements to have an attribute data-src like so:

<video id="my-id">    
   <source data-src="somevideo.mp4">
</video>

Then, after performing a mobile check using the script available at http://detectmobilebrowsers.com/ which I modified to include iPads etc (related SO answer here) I simply used the following script to automatically update the src attribute of each video (if we're on desktop in my case):

var sources = document.querySelectorAll('video#my-id source');
// Define the video object this source is contained inside
var video = document.querySelector('video#my-id');
for(var i = 0; i<sources.length;i++) {
  sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load();

And that's it! Nothing loads on mobile devices anymore and I can have fairly granular control over the devices it will or won't load on.

Hope this helps somebody.

Display:none for video element, will it still be buffered?

To be on the safe side, I would first write a general CSS rule for the video container that has display: none in it, and then add a rule inside a media query (@media screen and (min-width: 768px) {...}) for screens above 768px (or whatever your breakpont is) that contains display: block.

That would be a mobile-first approach that makes sure it's not loaded on smaller screens.

Can I hide html5 video tag on everything but desktops?

detect width with css media queries or JS
android tablets have "mobile" in their browser user agent , ios is easy to detect.
detect support for the video tag with modernizr.

How to prevent html5 video from loading before playing?

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="controls" preload="none">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

</body>
</html>

Use Preload"none"

http://diveintohtml5.info/video.html

Download video file for website based on screen size?

You need to first check to see if the screen is the appropriate width and then load your video source. Something like this should get you started.

var videoElem = document.querySelector('video');
var yourThreshold = 600;
if (screen.availWidth >= yourThreshold) {
  videoElem.append('<source src="yourVideo.mp4" type="video/mp4"');
}

You can of course decide how specific you want to be as far as targeting devices. Just the width alone might not suffice.

Make HTML5 video poster be same size as video itself

You can use a transparent poster image in combination with a CSS background image to achieve this (example); however, to have a background stretched to the height and the width of a video, you'll have to use an absolutely positioned <img> tag (example).

It is also possible to set background-size to 100% 100% in browsers that support background-size (example).
Sample Image

Update

A better way to do this would be to use the object-fit CSS property as @Lars Ericsson suggests.

Use

object-fit: cover;

if you don't want to display those parts of the image that don't fit the video's aspect ratio, and

object-fit: fill;

to stretch the image to fit your video's aspect ratio

Example

Disable HTML5 Video Download at CSS Breakpoint