// I tried to achieve this in chrome by doing like this..
video::-webkit-media-controls-fullscreen-button {
display: none;
}
It is sometimes not working. I need a permanent solution for this very badly.
I am requesting the people:
- This is not a duplicate question for any other in SO.
- That solution is not working, test it if you want.
That's why I asked this again.
I tried to achieve this in chrome by doing like this..
video::-webkit-media-controls-fullscreen-button {
display: none;
}
It is sometimes not working. I need a permanent solution for this very badly.
I am requesting the people:
- This is not a duplicate question for any other in SO.
- That solution is not working, test it if you want.
That's why I asked this again.
Share Improve this question edited Jul 27, 2018 at 8:56 Nisarg Shah 14.6k6 gold badges38 silver badges57 bronze badges asked Jul 27, 2018 at 8:48 Dara Naveen KumarDara Naveen Kumar 1793 silver badges11 bronze badges 6- 1 Possible duplicate of How to hide full screen button of the video tag in HTML5 – Budyn Commented Jul 27, 2018 at 8:49
- 1 Oh.. No. my dear @Budyn. That solution is not working and it is for chrome only. you can check it out before pushing a down vote. Thanks!! – Dara Naveen Kumar Commented Jul 27, 2018 at 8:55
- 1 I didn't down vote. It just looked identical to me so I gave you an example – Budyn Commented Jul 27, 2018 at 9:02
- 1 It's okay!! Suggest me any solution if you know about this problem. – Dara Naveen Kumar Commented Jul 27, 2018 at 9:03
- 1 @DaraNaveenKumar as you can see in the answer of user "paulitto" in the linked question it is not possible with css for other browsers than chrome. Btw I don't think you will get a better answer than the one provided in the linked question. Anyway I think you have to use a custom video player if you want to remove the full screen button. – marcramser Commented Jul 27, 2018 at 9:05
1 Answer
Reset to default 5You can create you own control (you have to do the styling but I think that should not be a problem).
JSFiddle
Tutorial with explanations
The HTML5:
<div id="video-container">
<!-- Video -->
<video id="video" width="640" height="365">
<source src="https://www.w3schools./htmL/mov_bbb.mp4" type="video/mp4">
<p>
Your browser doesn't support HTML5 video.
<a href="https://www.w3schools./htmL/mov_bbb.mp4">Download</a> the video instead.
</p>
</video>
<!-- Video Controls -->
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
<input type="range" id="seek-bar" value="0">
<button type="button" id="mute">Mute</button>
<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
<button type="button" id="full-screen" disabled>Full-Screen</button>
</div>
</div>
And this as JavaScript.
$( document ).ready(function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
// Sliders
var seekBar = document.getElementById("seek-bar");
var volumeBar = document.getElementById("volume-bar");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playButton.innerHTML = "Pause";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playButton.innerHTML = "Play";
}
});
// Event listener for the mute button
muteButton.addEventListener("click", function() {
if (video.muted == false) {
// Mute the video
video.muted = true;
// Update the button text
muteButton.innerHTML = "Unmute";
} else {
// Unmute the video
video.muted = false;
// Update the button text
muteButton.innerHTML = "Mute";
}
});
// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
// Play the video when the slider handle is dropped
seekBar.addEventListener("mouseup", function() {
video.play();
});
// Event listener for the volume bar
volumeBar.addEventListener("change", function() {
// Update the video volume
video.volume = volumeBar.value;
});
});