html - Video tag sticking issue -

i want video tag stick top (or bottom element above video tag). when 1 resizes window current code using, video element remove top (or bottom element above in hierarchy in html). there way prevent video coming loose top? assume because video tag trying keep ratio , might has width: 100%.

i made jsfiddle here , here code:

html:

<div class="background-video">   <video autoplay loop muted>     <source src="somevideo.mp4" type="video/mp4">   </video> </div> 

css:

.background-video {     position: relative; }  .background-video video {     position: absolute;     top: 0;     right: 0;     left: 0;     margin: 0 auto;     height: 1080px;     width: 100%; } 

so how make video tag doesn't resize in unpleasant way , still fills space correctly?

you have add css line responsive elements of video, image, iframe, etc.

css

audio, iframe, img, video {  max-width: 100%;  }