Question

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

有没有办法让视频在视频下方没有视频占用整个屏幕而在视频上留下文字？我想要占据整个宽度而不是整个高度，因此文本会在底部的黑色背景上滚动。

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

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

Demo

我正在使用这样的FitVid Plugin：

 $("video").fitVids();

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

Answer 2

将视频标记的宽度从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>

更改<video>上的宽度时，高度无效

2 个答案:

Demo