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.