I'm currently working with a website using HTML5 Video to display a video. I want the video to overlap, but I also want to include a button/link that will redirect users to more information when clicked.
For example:
.outer-container {
border: 1px dotted black;
width: 100%;
height: 100%;
text-align: center;
}
.inner-container {
border: 1px solid black;
display: inline-block;
position: relative;
}
.video-overlay {
position: absolute;
left: 0px;
top: 0px;
margin: 10px;
padding: 5px 5px;
font-size: 20px;
font-family: Helvetica;
color: #FFF;
background-color: rgba(50, 50, 50, 0.3);
}
video {
width: 100%;
height: 100%;
}<div class="outer-container">
<div class="inner-container">
<div class="video-overlay">Bug Buck Bunny - Trailer
<br />
<br />
<a href="http://www.google.com">Find out more</a>
</div>
<video id="player" controls
src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" autoplay loop></video>
</div>
</div>The link provided does not seem to work properly. I am unable to figure out why it's not functioning even though it is enclosed in a div element. Is there any way to make this functionality work without resorting to using JavaScript?