jquery - How to remove a video element using a media query

Question

I have a video that automatically plays when the window loads. But now that I am doing the mobile version, I would like to remove it. Using display:none in my mobile query removes the element but the video still plays in the background. I have a script in my html which controls the video fade in and out and I thought about just adding an if else statement using the window width but to no luck. The element removes but the video still plays in the background. Any guidance on this will be greatly appreciated.

<script type="text/javascript">
$(window).load(function() {

    if($(window).width()<761){
        $('video').get(0).pause();
        $('#intro').remove();
    }
    else{

    $('#intro').fadeIn(10000, function() {
    });

    $('video').bind('ended', function(){

        $('#intro').fadeOut(5000, function() {
        });
     });

     $('button').click(function() {
                $('video').get(0).pause();
                $('#intro').css('display', 'none');

     });
});
}
</script>