My JS-fu is weak :(

[wmdvanzyl]

GOAL: Show a video background on a website when visited by Desktops browsers, but completely remove it from DOM when visited by mobile browsers.

NOTE: I am not talking CSS media queries which can show or hide the video - that will still load it on a mobile device.

So in essence i am looking for "media queries in JavaScript" so that i can completely destroy the object and recreate it as needed.

What i found was this:

Vide for showing the video (i know i could do it by hand, but this jquery library does have one or two advantages in my case): GitHub - https://github.com/VodkaBears/Vide#readme

Then i discovered the creator of Vide had the same problem, as stated here:

Code: Select all

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.

So then i went and got hold of Harvey: http://harvesthq.github.io/harvey/#demo

But for the life of me i cannot get it to work. If someone knows of a better way to do this or perhaps can help me get this going, it would be much appreciated. Next step is moving over to the commercial help section if it turns out that it is harder than expected.

I have this in HTML:

Code: Select all

<div id="videoBackground" style="width: 100%; height: 400px;"
                      data-vide-bg="{root_url}/uploads/drive" data-vide-options="loop: false, muted: true, position: 0% -60%, resizing: true">
                    </div>

And this in the inline-script at bottom:

Code: Select all

$(function(){
                  Harvey.attach('screen and (min-width: 600px)', {
                    on: function() {
                        $('#videoBackground').vide("{root_url}/uploads/drive"), {
                            muted: true,
                            loop: false,
                            autoplay: true,
                            position: '0% -60%',
                            resizing: true,
                        };
                    },
                    off: function() {
                        var instance = $('#videoBackground').data('vide');
                        instance.destroy();
                    }
                });
              });

[wmdvanzyl]

Thanks to @Dr.CSS for pointing out that i could also use a server-side solution using PHP and that a module already exists for something like this.

Module name is browserdetect, but it is marked as stale. Anyone been able to implement this in CMSMS2?

Is it hard to convert a PHP plugin from ver1 to ver2?

[Rolf]

Afaik there is a browser detect feature in one of CG's support modules, CGExtensions or CGSimpleSmarty...

[wmdvanzyl]

@Rolf - i found a browserdetect feature in CGExtensions, but it returns a short string such as 'chrome' or 'firefox' (as far as i can tell from Help docs) and that won't help in detecting a mobile browser i think.

[Rolf]

But there is also a check for "is mobile", can't you use that?

[wmdvanzyl]

I ended up using your "clickable phone link" UDT. Cut out the extras. Now it just returns the $is_mobile variable back to template.

Link: http://www.cmscanbesimple.org/blog/smar ... ll-me-link

Looks like it works, but i'm not sure how to test it properly.

I will check out CG's options as well.