Why they differ in html and css? id inside vs outside video tag

Why they differ in html and css? id inside vs outside video tag

I want to make a video as a background of whole browser. I tried two
different ways. as the code showed below, I set up the id between in css
to # backgroundvideo, there is always some blank space left in the right
and button side. The second one is to set up #video outside, it works well
except for not responsive. Why they differ?
The html code:
<div id ="video"><video id ="backgroundvideo" autoplay loop="true">
<source src="videos/test2.mp4" loop="true">
</video>
</div>
The css code:
#backgroundvideo{
position: relative;
display: block;
width: 100%;
height: 100%;
}
or
#video{
position: relative;
display: block;
width: 100%;
height: 100%;
}
Plus: how to make the videos static even the browser is resized? since
both of the way i mentioned will make the video size change when resizing
browser.