Does Bootstrap CSS hidden loads element?

Question

I have a background video header on my website, which is not the best practice for mobiles and tablets... To avoid showing it on those devices I use hidden-phone and hidden-tablet. Since the video is pretty heavy, it would be nice (since it won't play) that it does not (down)load it, so the page would be lighter and my bandwidth saved...

So here's my question, does those class prevent (mobile) browsers to load the video ?

Answer 1

Yes, It loads it, it is how DOM works. For you not to load something you need JS. For example use JS to check if the viewport is small enough to meet certain criteria than use JS to shim video in or remove it.

Edit: You can also try to disable autoplay on mobile devices so it wont prefetch it when browser parses DOM.

$(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);
        }
    });
});