Wie verhindere ich, dass ein Overlay-Div unten zusätzlichen Platz schafft?

Question

Ich habe ein HTML5-Video auf meiner Website, das von einem Div überlagert wird, das eine coole Farbe hinzufügt, aber aus irgendeinem Grund schafft es zusätzlichen Platz zwischen ihm und dem folgenden Abschnitt meiner Website (siehe Bild als Referenz)

Wie Sie gibt es eine kleine Lücke zwischen dem lila-ish Overlay und dem gelben Bereich, im Grunde wird die Overlay-Anpassung nicht auf das Video zu sehen.

HTML:

<div id="vid-overlay"></div> 
    <div class="vid-container"> 
    <video autoplay loop> 
     <source src="video/Hello-World2.mp4" type="video/mp4"></source> 
     <source src="video/Hello-World2.webm" type="video/webm"></source> 
     </video> 
    </div> 

CSS:

video{ 
    width:100%; 
    height:auto; 
    display:block; 
    float:left; 
    margin:0; 
    padding:0; 
} 

#vid-overlay{ 
background: rgba(96,80,99,1); 
background: -moz-linear-gradient(top, rgba(96,80,99,1) 0%, rgba(96,80,99,0.51) 100%); 
background: -webkit-gradient(left top, left bottom, color-stop(0%, 
    position:absolute; 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 

Answer 1

Ist position:absolute, die für Ihre Anforderungen im vid-overlay div.

Wenn nicht versuchen: position:relative. Dies kann Ihren Overlay-Fehler lösen.

Answer 2

Das Video-Tag ist standardmäßig ein Inline-Block. Sie müssen es so als Blockelement machen angezeigt werden.

video {display: block;}