I'm struggling to find a solution that works for me - I could really use some assistance. My CSS skills are not up to par...
Currently, I have a video embedded in a web page with a text overlay. The problem arises when the content is displayed on a large screen; the overlay appears in the wrong position.
What would be the most effective approach to resolve this issue? Should I adjust the positioning of the overlay using CSS or utilize panels? Below is the code snippet...
CSS:
.video {
position:absolute;
bottom:0px;
left:0px;
width:50%;
height:80%;
}
#vidPlayer {
position:absolute;
bottom:-100px;
left:0px;
width:100%;
display:block;
z-index:99;
}
.overlayLabel {
font-size:xx-large;
font-weight:bolder;
font-style:italic;
color:antiquewhite;
position:absolute;
text-align:center;
bottom:50px;
left:100px;
width:900px;
border:2px solid red;
z-index:2147483647;
}
HTML:
<div>
<article class="video">
<video id="vidPlayer" title="My Video" >
<source src="Media/MyVideo.mp4" type="video/mp4" />
</video>
<asp:Label ID="lblWinner" runat="server" Text="Test Overlay" CssClass="overlayLabel"></asp:Label>
</article>
</div>
The modifications I made successfully addressed the following issues:
- Correctly displaying an overlay with dynamically set text over the video
- Ensuring the video is the correct size
Positioning the overlay accurately regardless of screen size
.video { position:relative; width:100%; height:auto; } #vidPlayer { z-index:99; position:relative; width:100%; height:100%; } .overlayLabel { z-index:2147483647; position:absolute; background-image:url("Images/test.png"); -webkit-transform: rotate(13deg); -moz-transform: rotate(13deg); -ms-transform: rotate(13deg); -o-transform: rotate(13deg); transform: rotate(13deg); font-size:xx-large; font-weight:bolder; text-align:center; color:black; bottom:44%; left:37%; width:30%; height:24%; }