更改 <video> 上的宽度时，高度没有影响答案

【问题标题】：Height has no effect when changing the width on <video>更改 <video> 上的宽度时，高度没有影响
【发布时间】：2022-02-28 17:00:48
【问题描述】：

当我将宽度从 1080 像素更改为 100% 时，视频将占据整个屏幕。我尝试使用高度标签控制高度，但没有成功。

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>

【问题讨论】：

标签： css html video alignment

【解决方案1】：

将视频标签的宽度从1080px改为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>

【讨论】：

【解决方案2】：

我认为，如果没有 javascript/jQuery，你将无法做到。

Demo

我正在像这样使用FitVid Plugin：

 $("video").fitVids();

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

【讨论】：