I am facing a challenge with implementing custom controls on a video embedded in my webpage. I have tried setting a div to absolute position for the buttons, but they are not clickable.
Is there a way to achieve this without using jQuery? I need the buttons in the div to be both visible and clickable above the video.
Embedded Video:
<div id="divVideo" style="text-align:center">
<video id="video1" width="720" autoplay loop>
<source src="01_vid.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
Custom Buttons (with associated script):
<button type="button" onclick="playPause(this)" class="btn btn-primary">▮▮</button>
<button type="button" onclick="muteUnmute(this)" class="btn btn-primary">Mute</button>
<button type="button" onclick="goHD(this)" class="btn btn-primary">HD</button>
Javascript Functions:
var myVideo = document.getElementById("video1");
function playPause(btn) {
if (myVideo.paused) {
myVideo.play();
btn.innerHTML = "▮▮"
} else {
myVideo.pause();
btn.innerHTML = "►"
}
}
function muteUnmute(etc) {
if (myVideo.muted) {
myVideo.muted = false
etc.innerHTML = "Mute"
} else {
myVideo.muted = true;
etc.innerHTML = "Unmute"
}
}
function goHD(el) {
if (myVideo.width != 1280){
myVideo.width = 1280
el.innerHTML = "SD"
}
else{
myVideo.width = 720
el.innerHTML = "HD";
}
}
CSS Styles:
#botoes {
float: center;
position: absolute;
bottom: 0; z-index: 1;
width: 100%;
text-align: center;
margin-bottom: 10px;
}
#divVideo {
position: relative;
width: 720px;
float: left;
height: 405px;
}
#video {
position: relative;
width: 720px;
height: 405px;
background-color: blue;
float: left;
display: block;
}
How can I ensure that the custom control buttons appear above the video within the containing div?