Ignore HTML5 on mobile devices

Question

Right now, I have a background video that I'd like to display only on devices larger than 768px (width). When you collapse the browser past 768px, the video disappears, and the poster.jpg for the video is displayed as the background instead.

All is working well with simple CSS, but the video is still loading on mobile devices, even though it's not being displayed.

Here's the HTML I'm using:

<div id="video_container">
    <video id="video-bg" autoplay loop muted data-wow-duration="2s">
        <source src="/video/bg.webm" type="video/webm">
        <source src="/video/bg.mp4" type="video/mp4">
        <source src="/video/bg.ogg" type="video/ogg">
    </video>
</div>

And the SCSS:

#video_container{
    background-size: cover;
    position:relative;
    z-index:-1;
    background: #000 (/video/poster.jpg) no-repeat;
    width:100%;
    height:100%;
    display:block;
    background-position:center center;
    overflow:hidden;

    #video-bg {
        position: relative;
        right: 0;
        bottom: 0;
        min-width: 100%;
        min-height: 100%;
        z-index: -100;
        display:none;
            @media(min-width: 768px){ 
                display:block;
            }
        }
}

Any help would be greatly appreciated.

Answer 1

display: none will only prevent the video from being displayed, it will be loaded nevertheless. Use element inspector in your browser to be sure this happens. It seems the best way is use JavaScript.

Answer 2

You need to use JavaScript to play and pause the video whenever the screen resizes.

// Create a function that gets the width of the screen
// and plays or pauses the video depending its value
var handleVideo = function () {
    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    if(width > 768) {
        document.getElementById('video-bg').play();
    }
    else {
        document.getElementById('video-bg').pause();
    }
};

// Bind this function to the resize event
// and also call it to execute on first load
window.addEventListener('resize', handleVideo, false);
handleVideo();

Edit : With this approach you don't need to have the autoplay attribute (it will start playing via JS) and avoid loading the file entirely in small devices.

Answer 3

Just some jquery will help you, check this fiddle.

It will check with matchMedia that the screen is bigger than 768px ,and then, if it´s bigger, will give the url for the videos. Then they´ll be loaded.

 var mq = window.matchMedia("(min-width: 768px)"); if (mq.matches) { $("#source1").attr("src", "http://techslides.com/demos/sample-videos/small.ogv"); $("#source2").attr("src", "http://techslides.com/demos/sample-videos/small.ogv"); $("#source3").attr("src", "http://techslides.com/demos/sample-videos/small.ogv"); } else { alert("LITTLE SCREEN"); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="video_container"> <video id="video-bg" autoplay loop muted class="wow fadeIn" data-wow-duration="2s"> <source id="source1" src="" type="video/webm"> <source id="source2" src="" type="video/mp4"> <source id="source3" src="" type="video/ogg"> </video> </div>