Невозможно выяснить, где находится это дополнительное пространство от

Question

У меня есть видео и контейнер для этого видео. Однако я не могу полностью обернуть контейнер вокруг видео. Я сделал фоновый белый фон, чтобы четко показать, где он слишком большой. Причина, по которой мне нужно правильно обернуть, - это то, что у меня есть набор элементов управления видео, который теперь находится ниже видео, где заканчивается конец.

Это CSS я написал, и я попытался довольно много вещей, но я просто не могу понять:

#video_container{ 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    border:2px solid blue; 
    margin: 20px; 
    padding: 0px; 
    width:100%; 
    height:100%; 
    position: relative; 
    background-color:white; 
} 
#video_container video{ 
    width:100%; 
    height:auto; 
    padding: 0px; 
    margin: 0px; 
} 
#video_container:hover #controls { 
    opacity: 0.7; 
    padding: 0px; 
    margin: 0px; 
} 

Это HTML для контейнера:

<div id="video_container"> 
    <video id="trailers"> 
     <source src="vLast.mp4" type="video/mp4"> 
     <source src="vLast.webm" type="video/webm"> 
    </video> 
    <nav> 
     <div id="controls"> 
      <button id="playButton">Play</button>  
      <div id="defaultBar"> 
       <div id="progressBar"></div> 
      </div> 
      <button id="vol" onclick="level()">Vol</button> 
      <button id="mute">Mute</button> 
      <button id="full" onclick="toggleFullScreen()">Full</button> 
     </div> 
     <div id="playlist"> 
      <div>cats</div> 
      <div>cats</div> 
      <div>cats</div> 
     </div> 
    </nav> 
</div> 

Answer 1

Добавить дисплей: блок на видеоэлементе:

#video_container video{ 
     width:100%; 
     height:auto; 
     padding: 0px; 
     margin: 0px; 
     display:block; 
}