javascript - Pause/Stop or remove HTML5 video on window resize -

i have responsive html banner has video (utilizing video tag) inside of it. unit responsive entire thing scale , video. have breakpoint setup turns on new divs when window closed below 820px. accomplished via

 @media (max-width:820px) {  //css here } 

i'd include either javascript of jquery removes or pauses video when size reached video doesn't continue play out of sight. simple:

  .ad_div2  {  display:none;  } 

where video element lives hides div can still hear video playing in background.

i've tried couple of things not sure i'm setting right.

 <script>  var parent=document.getelementbyid("div1");  var child=document.getelementbyid("p1");  parent.removechild(child);  </script> 

(with appropriate id names) , within @media tag isn't doing - maybe i've placed in wrong area or it's not quite need.

any would, always, appreciated. thanks!

you need add listener on window resize event.

$(function() {     var videoelement = document.getelementbyid('yourvideoid'),         $window      = $(window);      $window.resize(function() {         var windowwidth = $window.width();          if (windowwidth < 820 && !videoelement.paused) {             videoelement.pause();         }         else if (windowwidth >= 820 && videoelement.paused) {             videoelement.play();         }     }); }); 

basically, when window width below 820px, pause video if it's not paused. added additional functionality play when window size >= 820px.