How can I disable HTML 5 Video Player full screen button in all kind of browsers, especially in IE, Edge & Firefox, Opera, Safari?

Question

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:

1. This is not a duplicate question for any other in SO.
2. That solution is not working, test it if you want.

That's why I asked this again.

Answer 1

You 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.com/htmL/mov_bbb.mp4" type="video/mp4">
    <p>
      Your browser doesn't support HTML5 video.
      <a href="https://www.w3schools.com/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;
});

});