javascript - Dynamically clearing an absolute positioned div based on browser size with jquery .css() property -

i working on site, , have code below. i'm trying show full screen absolute positioned video takes size of whatever browser is, show content under it. since it's absolute position div , can't clear div, need height of div, set "margin-top" property height of div content below video.

#bgvid {         border: solid 4px blue;         position: absolute;          right: 0; bottom: 0;         min-width: 100%; min-height: 100%;         overflow-y: hidden;         width: auto; height: auto; z-index: -1;     }     .wrap{         height: 500px;         border: solid 4px black;     } .... .... <div id="bgvid"> <video autoplay loop>      <source src="https://ia600400.us.archive.org/8/items/tripdownmarketstreetrbeforethefire/tripdownmktstreet_clean_512kb.mp4" type="video/mp4"> </video> </div><!--end of #bgvid--> <div class="wrap">     <h1>lorem ipsum</h1> </div><!-- end of .wrap--> .... .... <script type="text/javascript">     var bgvidheight= $('#bgvid').height();     var styles = {'margin-top':bgvidheight};     $('.wrap').css(styles); </script> 

so shows .wrap div under #bgvid div when page loads, when resize browser position of .wrap div stays placed on loadand need reload in order put in correct position under video, because script run everytime page loads.

this fine when opens page on phone or tablet, if resizes browser screwy until reload.

so question if there way height of #bgvid div feed jquery?

try

$(window).resize(function(){      var height = $('#bgvid').height();     //do stuff height  });