6

On OSX Safari, HTML5 video tag when clicking on fullscreen. How can I force the video to cover the full screen instead of showing a small (maybe the original) size with a black background?

Jack
  • 111
  • 1
  • 5
  • It would be a good idea to provide some code that you have tried. – jproffitt Dec 12 '14 at 21:49
  • Works great on most browsers when clicking fullscreen exept for Safari on OSX. – Jack Dec 12 '14 at 21:54
  • I have the same issue, my code is similar to the one of @TheCrazyProfessor answer and I have the `max-height` as suggested by @Jack but still have the same issue. Did you find a working answer ? – gervais.b Apr 14 '20 at 10:13

2 Answers2

5

Ok, found it. Need some CSS when a max-height is set. Answer:

video:-webkit-full-screen {
   width: 100%;
   height: 100%;
   max-height: 100%;
}
Jack
  • 111
  • 1
  • 5
2

As @Jack say we need to use the CSS -webkit-full-screen

I think you wanna have you're own customized controller right? In that case, we need to put the control panel and the video inside a div, and use the full-screen on that. Let's us just call it videoContainer

First we make the HTML

<div class="videoContainer">
    <video id="video" allowfullscreen="allow">
        <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <p>Your browser does not support the video tag.</p>
    </video>

    <!-- Control -->
    <div class="control">
        <a class="play mediaplayer-play"></a>
        <a class="fullscreen mediaplayer-full-screen"></a>
    </div>
</div>

CSS

.videoContainer:fullscreen, .videoContainer:-ms-fullscreen,   .videoContainer:-moz-full-screen, .videoContainer:-webkit-full-screen {
    width: 100%;
    height: 100%;
}

Sometimes it can be buggy (bug in Safari) so a way to fix that is to add a style to the default control.

video:-webkit-full-screen::-webkit-media-controls-panel, video:-webkit-full-screen::-webkit-media-controls, video:-webkit-full-screen::-webkit-media-text-track-container {
    display: none !important;
    opacity: 0;
}

This will style Safari's normal controllers, and make sure they don't show and make it's kinda awkward.

So long so good. All we need now to get the controller to work. This can be done by a little jQuery/Javascript code by using the fullscreen API

$(".fullscreen").click(function(){

    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
        // exit full-screen
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }

    }else if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
        var i = $("#videoContainer");

        // go full-screen
        if (i.requestFullscreen) {
            i.requestFullscreen();
        } else if (i.webkitRequestFullscreen) {
            i.webkitRequestFullscreen();
        } else if (i.mozRequestFullScreen) {
            i.mozRequestFullScreen();
        } else if (i.msRequestFullscreen) {
            i.msRequestFullscreen();
        }
    }           
});

If you wanna know how to add Picture In Picture you can see this post here

TheCrazyProfessor
  • 919
  • 1
  • 15
  • 31