在<video>上更改宽度时，高度没有影响

Question

当我将宽度从1080 up更改为100%时，视频将占据整个屏幕。我试着用“高度”标签来控制高度，但没有成功。

jsfiddle.net

jsfiddle.net

是否有一种方法可以在视频下面获取文本而不占用整个屏幕，将文本保留在视频上？我想要的全宽度，但不是整个高度，所以文本滚动在黑色背景在底部。

body {width:100%; height:100%; overflow:hidden; margin:0; background-color:black;}
 html {width:100%; height:100%; overflow:hidden; }
 
 #custom-message {
    font-family: verdana;
    font-size:18pt;
    color: rgb(230, 200, 98);
    z-index:1;
}

    <table style="width:100%;height:100%;background-color:#000">
        <tr valign="top">
            <td width="100%" valign="top" align="center">
                <video width="100%" src="http://henriksjokvist.net/examples/html5-video/video.ogg" autoplay loop></video>
            </td>
        </tr>
        <tr>
        <td style="color:white;height:120px"><marquee direction="right" speed="normal" behavior="loop" class="result" id="custom-message">text</marquee></td>
        </tr>
    </table>

​

​

Answer 1

将视频标签的宽度从1080 of更改为100%，删除了文本标签的绝对定位属性。

​

body {width:100%; height:100%; /*overflow:hidden*/; margin:0; background-color:black;}
 html {width:100%; height:100%; /*overflow:hidden;*/ }
 
 #custom-message {
    /*position:absolute;*/
    font-family: verdana;
    font-size:18pt;
    color: rgb(230, 200, 98);
    z-index:1;
    bottom:1%;
}

<table style="width:100%;height:100%;background-color:#000">
        <tr valign="top">
            <td width="100%" valign="top" align="center">
                <video width="100%" src="http://henriksjokvist.net/examples/html5-video/video.ogg" autoplay loop></video>
            </td>
        </tr>
        <tr>
        <td style="color:white"><marquee direction="right" speed="normal" behavior="loop" class="result" id="custom-message">text</marquee></td>
        </tr>
    </table>

​

Answer 2

我认为，如果没有javascript/jQuery，您就无法做到这一点。

演示

我像这样使用FitVid插件：

 $("video").fitVids();

从jsdelivr：https://cdn.jsdelivr.net/fitvids/1.1.0/jquery.fitvids.js加载