Pause/Stop or remove HTML5 video on window resize

Pause/Stop or remove HTML5 video on window resize

I currently have a responsive HTML banner that has video (utilizing the
video tag) inside of it. My unit is responsive as the entire thing will
scale and so will the video. I have a breakpoint setup that turns on new
divs when the window is closed below 820px. This is accomplished via
@media (max-width:820px) {
//css is here
}
I'd like to include either javascript of jquery that also removes or
pauses the video when this size is reached just so the video doesn't
continue to play out of sight. My simple:
.ad_div2
{
display:none;
}
where the video element lives simply hides that div but you can still hear
the video playing in the background.
I've tried a couple of things but not sure that I'm setting it up right.
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
(with my appropriate id names) and that within my @media tag isn't doing
it - maybe i've placed this in the wrong area or it's not quite what I
need.
Any help would, as always, be greatly appreciated. Thanks!