问题
Ok. Ive been struggling with this for a day. Can any one help?
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.
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>
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>
Is it a problem with my code or that it is in a Joomla module? Any help greatly appreciated.
回答1:
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>
Make H1 DIV position:absolute; and give left:50%; and top:50%;.
来源：https://stackoverflow.com/questions/28739231/text-centered-overlayed-on-video-in-joomla-module-in-html