Mobile Video

[b3nhartl3y]

Hello, great plugin, just wondering how you disable the video on mobile devices. I'm still seeing a call to the video even though it's not playing. Does it take any bandwidth up at all at mobile?

[carlwood]

Hey @b3nhartl3y. I'm having to do this myself, and I've found an option if you don't mind using another plugin (it is lightweight). Harvey.js is basically media queries in javascript: http://harvesthq.github.io/harvey/

So in the JS, you'll want something like:

Harvey.attach('screen and (min-width: 600px)', {
    on: function() {
        $('.home-hero').vide({
           // your stuff here
        });
    },
    off: function() {
        var instance = $('.home-hero').data('vide');
        instance.destroy();
    }
});

I've used 600px as an example minimum width. If the device is larger than that, it will follow 'on' and activate/load the Video. If it is smaller, you can grab your video instance and destroy it. That should mean that the video isn't loaded on mobile. Worked when I tested it on mobile.

[samuelorf]

This seems like the biggest deal with this plugin. Would love a solution. Downloading a background video on mobile is irresponsible. Anyone have any ideas?

[caleuanhopkins]

Couldn't get Harvey to work, but actually the plugin is probably over kill now this is available:

matchmedia matchmedia usage

Here's an example of how I got it working:

var isMobile = window.matchMedia("only screen and (min-width: 400px)");

if (isMobile.matches) {
    var target = $('#vide')
    target.vide({
      mp4: "video.mp4",
      webm: "video.webm"
      ogv: "video.ogv",
      poster: "poster.png"
    }, {
        posterType: "jpg", 
        loop: true, 
        muted: true, 
        position: "0% 0%", 
        resize:true 
    });
}else{
    var target = $('#vide')
    target.vide({
      poster: "poster.png"
    }, {
        posterType: "jpg", 
        loop: true, 
        muted: true, 
        position: "0% 0%", 
        resize:true 
    });
}

This solution means no Video is even loaded, let alone run on mobile. Saves bandwidth and means you don't have to change any css to ensure the poster and videos fit in your element layout.

[lhazell]

This works, but your "isMobile" variable is counter-intuitive. I would change the "min-width" media-query to "max-width" so that "isMobile" is true.

[officialprateek]

Simple Solution, This will trigger video fallback and shows image on mobile screens

@media screen and (max-width: 767px) { #parent-div-name video { display: none } }

[5brothers]

Couldn't get Harvey to work, but actually the plugin is probably over kill now this is available:

matchmedia matchmedia usage

Here's an example of how I got it working:

var isMobile = window.matchMedia("only screen and (min-width: 400px)");

if (isMobile.matches) {
    var target = $('#vide')
    target.vide({
      mp4: "video.mp4",
      webm: "video.webm"
      ogv: "video.ogv",
      poster: "poster.png"
    }, {
        posterType: "jpg", 
        loop: true, 
        muted: true, 
        position: "0% 0%", 
        resize:true 
    });
}else{
    var target = $('#vide')
    target.vide({
      poster: "poster.png"
    }, {
        posterType: "jpg", 
        loop: true, 
        muted: true, 
        position: "0% 0%", 
        resize:true 
    });
}

This solution means no Video is even loaded, let alone run on mobile. Saves bandwidth and means you don't have to change any css to ensure the poster and videos fit in your element layout.

Sure? Video starts playing