JS window width html5 video element responsive

Question

Alright I have been trying a lot of different things but can't get it to work. So I am asking here.

I have 3 video elements on a page. One for desktop, tablet and smartphone. Now I need to remove video elements depending on the screen size.

So when screen size is < 767:
Smartphone = visible
Tablet = removed
Desktop = removed

Screen size is >=767 && <980
Smartphone = removed
Tablet = visible
Desktop = removed

Screen size is >=980
Smartphone = removed
Tablet = removed
Desktop = visible

CSS media queries aint working because the video elements keep playing. Yes on mobile it is prevented for autoplaying but on desktop browser resize it plays this should not happen. So display:none; is out of the question.

So I need to create some JS magic I guess. This is what I have so far I am trying to fill in the blank pages with everything I can come up with but so far it did not result in the desired effect.

$(document).ready(function () {
$(window).resize(function () {
    if ($(this).width() < 767)
        WHAT SHOULD I WRITE HERE
    else if ($(this).width() >= 767 && $(this).width() < 980)            
        WHAT SHOULD I WRITE HERE            
    else if ($(this).width() >= 980)                        
        WHAT SHOULD I WRITE HERE            
});
});

http://jsfiddle.net/36unpxj0/2/

In the above fiddle you can see the code entirely and fiddle around with it. Thank you very much for helping.

PS: jQuery solutions are just as welcome as pure JS but please tell if it is JS or jQuery.

EDIT 1:

As usual I am going to keep searching and adding info to this post! I found the following which could do the trick:

$("#video-ID").first().attr('src','')

Or

$("#video-ID").empty().remove();

I tried both but with no luck: See fiddle http://jsfiddle.net/36unpxj0/3/

EDIT 2:

Alright got the answer from CitizenDelta and it is working in the JSFiddle therefore I have accepted his answer. However this is currently not working inside a Joomla website. So I am going to keep looking.

Answer 1

Here a demo, I hope, it is what you need : demo

Steps :

1. I hide every video (pauseAndHideAll function)
2. I detect the screen (showTheGoodOne function)
3. I show and play the video correpsonding

In JavaScript, I have just made this :

$(document).ready(function () {

function pauseAndHide($element) {
    $element.get(0).pause();
    $element.hide();
}

function showTheGoodOne() {
    if ($(window).width() < 767) {
        $('#smartphonevid').show();
        $('#smartphonevid').get(0).play();
    } else if ($(window).width() >= 767 && $(this).width() < 980)   {
        $('#tabletvid').show();
        $('#tabletvid').get(0).play();
    } else if ($(window).width() >= 980)  {
        $('#desktopvid').show();
        $('#desktopvid').get(0).play();
    } 
}

function pauseAndHideAll() {   
    $('video').each(function() {
        pauseAndHide($(this));         
    });     
}

pauseAndHideAll();
showTheGoodOne();

$(window).resize(function () {
    pauseAndHideAll();
    showTheGoodOne();
});
});

Optionnal improvment :

Maybe you could detect the current time of the video playing, then you resume the other video to this time.

Answer 2

Hope this helps you is just css

 #video-bg { height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 30px; position: relative; } #video-bg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

 <div id="video-bg" class="smartphone"> <video autoplay muted loop controls id="smartphonevid"> <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> </video> </div>