在Joomla模块的HTML中，文本居中叠加在视频上 [英] Text centered overlayed on video in Joomla module in HTML

问题描述

好的。我一直在努力这一天。可以帮助任何人吗？

Ok. Ive been struggling with this for a day. Can any one help?

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

I am trying to auto play a .mp4 video as the background in a Joomla CMS module with text overlaying on the top in the center of the module.

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

I decided simple html would be better than trying to find a plugin to do it.

基本上希望视频在模块的中心（水平和垂直）自动播放。这是相当容易，因为视频是模块的宽度和高度自动调整。模块是响应，所以没有问题。此代码适用于：

Basically I want the video to auto play in the center (both horizontally and vertically) of the module. This is fairly easy as the video is the EXACT width of the module and height adjusts automatically. The module is responsive so no problems there. This code works:

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

我所努力的是，将H1和标题放在视频的顶部水平和垂直）。所以我试过下面的html，但文字只是出现在视频之前，而不是叠加在视频的中心：

What I struggle with, is putting and H1 title over the top of the video in the center (both horizontally and vertically). So I tried the following html but the text simply appear before the video, not overlayed in the center of the video:

<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模块？

Is it a problem with my code or that it is in a Joomla module? Any help greatly appreciated.

推荐答案

尝试按照以下步骤解决您的问题：

Try following it will solve your issue:

<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％; 。

Make H1 DIV position:absolute; and give left:50%; and top:50%;.

这篇关于在Joomla模块的HTML中，文本居中叠加在视频上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！