Wrapping eines Video-Elements verursacht seltsame Höhe

Question

Wenn ich ein HTML5-Video-Element innerhalb eines div platzieren, verursacht es eine größere Höhe des Wrappers als das Video-Element. Der Wrapper ist 7px höher als die Videoquelle. Es gibt keine Mindesthöhe oder etwas anderes.

Have a look! (Scroll down to the Video)

Das Videoelement 513px hoch und die Umhüllung div (.image) ist 520px hoch.

<div class="image"> 
    <video muted loop autoplay style="width:100%;" id="video-player"> 
     <source treatidasreference="1" type="video/mp4" src="/fileadmin/user_upload/bilder/projekte/04_Online_Film_3D-CGI/sparkasse_iserlohn/Sparkasse_175Jahre_FinalCut_01_1_1_NEU.mp4"></source> 
    </video> 
</div> 

Answer 1

Das HTML5 video Element wird als Flow-Inhalt oder Phasing Inhalt oder einbetten Inhalt es wie ein Inline-Element verhält, was bedeutet, zur Kenntnis genommen. Es berücksichtigt daher Leerzeichen um Ihr HTML herum (wie Leerzeichen, Zeilenumbrüche usw.).

Option 1: Anzeige: Block;

Wenn Sie einen Block erstellen, wird der Platz unter dem Videoelement entfernt, das für den Unterlängen im Text reserviert ist. (Unterlängen sind der untere Teil von Zeichen wie y, g, p usw., die auf die Grundlinie abfallen).

es zu beheben, stellen Sie Ihr Video sein:

display: block; 

---

Option 2: vertical-align: top;

Legen Sie das Video so fest, dass es vertikal ausgerichtet ist. Der für die Unterlängen reservierte Platz ist immer noch da, aber er wird oben im Video angezeigt, aber da die Höhe des Videos so viel mehr ist als der Text, wird es niemals einen Einfluss haben.

vertical-align: top; 

---

• Weitere Informationen finden Sie auf der Video-Tag und seine Eigenschaften here.
• Und here für weitere Informationen über den Fluss Inhalt.
• Und schließlich here für weitere Informationen in Bezug auf Schriftart Unterlängen.