How to Hide Full Screen Button of The Video Tag in HTML5

Disabling fullscreen button on HTML5 video tag

The controlslist attribute, when specified, helps the browser select what controls to show on the media element whenever the browser shows its own set of controls (e.g. when the controls attribute is specified).
The allowed values are nodownload, nofullscreen and noremoteplayback.

<video controls controlsList="nofullscreen">

https://googlechrome.github.io/samples/media/controlslist.html

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

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;
});

});

How to disable default controls on a full screen HTML5 video?

Finally, I found a way around this.
As Alexander Farkas suggested, I wrapped the video in another div, and I set this parent div to go full screen, after which I set the height and width of the video to screen.height and screen.width respectively. And I restored the original properties of both the divs on exiting full screen.

Pseudo Code :

HTML :

<div id="videoContainer" style="position:absolute;background-color:black;">
     <video id="videoId" style="height:240;width:320;" ondblclick="enterFullScreen('videoId')" src="movie.mp4"></video>
</div>

JavaScript :

function enterFullScreen(id) {
    var element = document.getElementById(id);
    element.parentNode.webkitRequestFullScreen();           
    element.style.height = screen.height;
    element.style.width = screen.width;
}
document.addEventListener("webkitfullscreenchange", function () {
    if(!document.webkitIsFullScreen) {
        // Restore CSS properties here which in this case is as follows :
        var element = document.getElementById('videoId');
        element.style.height=240;
        element.style.width=320;
    }
    }, false);

HTML5 video - disable fullscreen only

controls is a binary state, you either have what the browser provides or you have nothing.

If you don't want the browser to provide a full screen control but still want a UI, then you'll need to turn controls off and implement your own UI with JavaScript.

disable fullscreen mode on html video on mobile devices

Use this code for mobile browsers:

<video autoplay loop muted controls webkit-playsinline playsinline>
    <source src="file.mp4" type="video/mp4">
</video>

Using webkit-playsinline and playsinline make Mobile browsers play the video right where it is instead of the default, which is to open it up full-screen while it plays.

Disable HTML5 video full screen mode

I think you should hide the native control. And use css create interface player for you with this you can customize anything you want.
I suggest you can use http://mediaelementjs.com/

---

Related Topics