Safari html5 video fullscreen size

Question

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?

Answer 1

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

video:-webkit-full-screen {
   width: 100%;
   height: 100%;
   max-height: 100%;
}

Answer 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