HTML / CSS - 如何使叠加视频文本完全响应？

Question

我正在为一个朋友创建一个网站，我有一个主页的视频登陆屏幕。我只想在视频的正中央放置文本 - 我设法做到了。

然而，当使用开发人员工具并在视口之间切换时，我发现在 phone 上查看时，叠加文本被推到页面下方......甚至进一步向下，具体取决于phone是。

这里是CSS覆盖写入的代码...

#MainTitle
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: 'Original Surfer', cursive;
    color: darkblue;
    font-size: 18pt;
}

视频显示完美，但叠加文本显示困难。请帮忙！

Answer 1

将这个样式添加到videoDiv，它会是这样的：

<div id="videoDiv" style="position: relative;margin-top: 80px;">

然后从 #myVideo 中删除 padding-top: 80px;。

HTML / CSS - 如何使叠加视频文本完全响应？

HTML / CSS - How to make overlay video text completely responsive?

html

javascript

css

responsive-design