AbeIsWatching :
Okay, I have a video element with custom controls, but I have no idea why when I make the video full screen by double click, the custom control which I've made just gets blocked behind the video, I gave the video z-index and also to the controls but the control panel is always behind the full screened video, this is the code.
"use strict"
const videoEvents = ['click', 'dblclick', 'mouseenter', 'mousedown', 'mousemove', 'change'];
const videoEventDistributer = document.querySelector('.videoPlayerContainer');
const mainVideo = document.querySelector('.mainVideo');
const videoPlayerControlerContainer = document.querySelector('.videoPlayerControlerContainer');
const btnFullscreen = document.querySelector('.btnFullscreen');
const btnExitFullscreen = document.querySelector('.btnExitFullscreen');
let turnOnController = false;
const fullscreenManager = () => {
if (document.fullscreenElement !== mainVideo) {
mainVideo.requestFullscreen();
btnFullscreen.classList.remove('active');
btnExitFullscreen.classList.add('active');
videoEventDistributer.style.setProperty('width', '100vw');
videoEventDistributer.style.setProperty('height', '100vh');
videoPlayerControlerContainer.style.setProperty('top', 'calc(100vh - 40px)');
}
if (document.fullscreenElement === mainVideo) {
document.exitFullscreen();
btnExitFullscreen.classList.remove('active');
btnFullscreen.classList.add('active');
videoEventDistributer.style.setProperty('width', '80vh');
videoEventDistributer.style.setProperty('height', 'calc(45vh + 40px)');
videoPlayerControlerContainer.style.setProperty('top', '45vh');
}
}
//
videoEvents.forEach(videoEvent => {
videoEventDistributer.addEventListener(videoEvent, event => {
if (event.type === 'click') {
if (event.target === mainVideo) {
if (mainVideo.paused) {
mainVideo.play();
} else {
mainVideo.pause();
}
}
}
if (event.type === 'dblclick') {
fullscreenManager();
}
if (event.type === 'mouseeneter') {
}
if (event.type === 'mousemove') {
}
if (event.type === 'mousedown') {
}
if (event.type === 'change') {
}
});
});body {
background: steelblue;
}
.videoPlayerContainer {
position: fixed;
width: 80vh;
height: calc(45vh + 40px);
background: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mainVideo {
width: 100%;
height: calc(100% - 40px);
position: absolute;
top: 0;
left: 0;
z-index: 50;
}
.videoPlayerControlerContainer {
height: 40px;
width: 100%;
background: green;
transform: translateY(0);
position: absolute;
top: 45vh;
left: 0;
z-index: 100;
transition: transform .3s;
display: grid;
place-items: center;
gap: 25px;
grid-template-columns: 10% 50% 20% 1fr;
}
.videoPlayerControlerContainer.active {
transform: translateY(-100%);
transition: transform .3s;
}
.btnPause,
.btnPlay {
height: 25px;
width: auto;
display: none;
}
.btnPause.active,
.btnPlay.active {
display: block;
}
.progressBar {
width: 100%;
}
.audioBar {
width: 80%;
}
.btnFullscreen,
.btnExitFullscreen {
height: 25px;
width: auto;
display: none;
}
.btnFullscreen.active,
.btnExitFullscreen.active {
display: block;
}<body>
<div class="videoPlayerContainer">
<video class="mainVideo" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"></video>
<div class="videoPlayerControlerContainer">
<img src="pause.svg" alt="" class="btnPause active">
<img src="play.svg" alt="" class="btnPlay">
<input class="progressBar" type="range" name="" id="">
<input class="audioBar" type="range" name="" id="">
<img class="btnFullscreen active" src="goFullScreen.svg" alt="">
<img class="btnExitFullscreen" src="exitFullScreen.svg" alt="">
</div>
</div>
</body>I want to be able to put my controler in front of the full screened video, currenty it gets resized pretty well when the video is full screen but it is behind the video, looking forward to you tips and comments!
Husain Ahmmed :
You can check this post Hiding Native HTML5 Video Controls in Full-Screen Mode . In this post they discuss this issue clearly. You can hide the native controls in full screen using this code
video::-webkit-media-controls { display:none !important; }
I work with your code but unfortunately can't able to show your custom controll. May be you can find something
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=405035&siteId=1