在 HTML 的 Joomla 模块中，文本居中叠加在视频上

Question

好的。我为此苦苦挣扎了一天。有人可以帮忙吗？

我正在尝试在 Joomla CMS 模块中自动播放 .mp4 视频作为背景，文本覆盖在模块中心的顶部。

我决定简单 html 比试图找到一个插件更好。

基本上我希望视频在模块的中心（水平和垂直）自动播放。这相当容易，因为视频是模块的精确宽度，高度会自动调整。该模块响应迅速，因此没有问题。此代码有效：

<video width="1600" autoplay loop>
<source src="/newimages/capsulas-compatibles.mp4" type="video/mp4">
</video>

我遇到的困难是将 H1 标题放在视频顶部的中央（水平和垂直方向）。所以我尝试了以下 html 但文本只是出现在视频之前，没有覆盖在视频的中心：

<div style="z-index:10; position:relative; top:0; text-align:center; vertical-align: middle; ">
<h1><font color="white">HERE IS MY TEXT</font></h1></div>
<div style="z-index:1;"><video width="1600" autoplay loop>
<source src="/newimages/myvideo.mp4" type="video/mp4">
</video></div>

是我的代码有问题还是它在 Joomla 模块中？非常感谢任何帮助。

Answer 1

尝试按照以下方法解决您的问题：

<div style="z-index:10; position:relative; top:50%; left:50%; text-align:center; vertical-align: middle; position:absolute; ">
<h1><font color="white">HERE IS MY TEXT</font></h1></div>
<div style="z-index:1;"><video width="1600" autoplay loop>
<source src="/newimages/myvideo.mp4" type="video/mp4">
</video></div>

将 H1 DIV position:absolute; 并给出 left:50%; 和 top:50%;.

在 HTML 的 Joomla 模块中，文本居中叠加在视频上

Text centered overlayed on video in Joomla module in HTML

css

html

video

joomla