HTML5 video won't maximize beyond container dimensions in native full screen mode

Question

I encountered a very interesting cross-browser HTML5/CSS issue: whenever there is an animation WITH -webkit-animation-fill-mode: both; attached to a DIV containing HTML5 video element, this video won't fill whole window in native HTML5 full-screen mode, i.e. the video size in full-screen will be limited to parent element dimensions.

Description may be confusing, so I have created a simplified example: http://jsfiddle.net/7SsPa/3/embedded/result/

(note: jsFiddle does not allow full screen mode at all, but it gives understanding of what happens. To see same code with full-screen enabled, you can open it here: https://dl.dropboxusercontent.com/u/3635046/fullscreen.html)

We tried several JS-video players (video.js, flowplayer etc), and the issue is present with all of them and does not relate to any particular JS library.

To make things easier, this code will only work in webkit browsers, but I got same behavior in Firefox. The weirdness goes beyond video dimensions. On a real website we observed issues with z-index and other page elements, i.e. full screen mode wasn’t full screen at all. Also note that animation in the example is primitive only for the sake of simplicity.

Removal of -webkit-animation-fill-mode solves everything. I am not certain whether it's a bug or some obscure HTML/CSS behavior that I can't comprehend, but the question is:

is there a way to achieve proper full-screen mode and preserve -webkit-animation-fill-mode attribute? It is probably possible to remove ".animated" class via JS upon full-screen activation, but I'm looking for a cleaner solution. Note: containing element has certain dimensions (it's a modal window), has margins and surrounded by other elements, i.e. we can't just set its width/height to 100%.

Thank you.

Answer 1

Adding the following CSS should take care of this problem:

:-webkit-full-screen-ancestor {
    animation: none;
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
}

Via: https://bugs.chromium.org/p/chromium/issues/detail?id=501246#c13

Answer 2

Give dimension of height and width in percentage .

for eg : width : 100%

Answer 3

I had the same issue, but only in webkit browsers. I give a specific class to the body tag when anything goes fullscreen, and remove it on exiting;

$(document).on('webkitfullscreenchange', function(){
   if(document.webkitFullscreenElement !== null) {
      $('body').addClass('in-fullscreen');
   } else {
      $('body').removeClass('in-fullscreen');
   }
});

Now it's easy to overwrite the problematic css property;

.in-fullscreen .container {
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
}