为什么我不能让 HTML 视频标签对齐顶部？答案

【问题标题】：Why can't I get the HTML video tag to align top?为什么我不能让 HTML 视频标签对齐顶部？
【发布时间】：2017-04-20 12:34:47
【问题描述】：

我的目标是让视频占据 1080p 屏幕的顶部 90%，而底部的 10% 由文本使用。

无论我尝试什么，视频似乎都无法适应或对齐。

使用 html 视频标签进行这项工作有什么诀窍吗？

 <table style="width:1080px;height:100%;background-color:#888">
  <tr valign="top">
    <td width="1080px" height="90%" valign="top">
<video width="1080px" height="100%" src="video.mp4" autoplay loop></video>
    </td>
  </tr>
    <tr>
    <td>TEXT</td>
  </tr>
</table>

例子：

https://jsfiddle.net/1u1xc1sL/

【问题讨论】：

你能发一个JSFiddle吗？
嗯，我很确定这与<table> 完全无关...
您可以使用vh 单位。

标签： css html video alignment html-table

【解决方案1】：

使用 CSS：

video {
  //how far from top
  top: 0px;
}

&lt;video style="background-color: black;" width="1080px" height="100%" src="video.mp4" autoplay loop&gt;Your bowser dooes not support the video tag&lt;/video&gt;

【讨论】：

【解决方案2】：

已编辑答案：您的视频容器的比例与视频本身的比例不符：您的规则使其为 1074 x 1080，但它的高度必须更小。这种内联样式不起作用：width="1080px" height="100%" - 它会导致灰色区域位于视频区域的顶部...

当您强制表格为 100% 高度时，其行（及其tds）将被拉伸以适应该高度。删除：https://jsfiddle.net/j2axmgdq/1/

【讨论】：

true 但更重要的是它与顶部对齐。

【解决方案3】：

您需要删除 td height 和 video height。在全页模式下查看示例。

body {width:100%; height:100%; overflow:hidden; margin:0; background-color:black;}
 html {width:100%; height:100%; overflow:hidden; }

<html>

<body>
    <table style="width:1080px;height:100%;background-color:#888">
        <tr valign="top">
            <td width="1080px" valign="top" align="left">
                <video width="1080px" src="http://henriksjokvist.net/examples/html5-video/video.ogg" autoplay loop></video>
            </td>
        </tr>
        <tr>
            <td>TEXT</td>
        </tr>
    </table>
</body>

</html>

【讨论】：