Question

确定。我一直在努力争取这一天。任何人都可以帮忙吗？

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

我认为简单的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模块中的文本居中覆盖视频

1 个答案: