CODEWITHSUNDEEP
google-chromehtml5-videofullscreen
user2718671
user2718671

Reputation: 2976

Fullscreen mode in Google Chrome does not work

By clicking on my fullscreen button the video stretches to it's original size but is not displayed in fullscreen. But I dont want black bars at more than two sides. There are no css attributes used that could explain that. To set the video attributes to width: 100%; and height: 100%; or auto didn't help. Fullscreen works perfectly in Firefox but not Chrome. I enter fullscreen mode with this code:

$('.fullscreen-btn').click(function () {
            if (movie[0].requestFullscreen) {
              movie[0].requestFullscreen();
            } else if (movie[0].mozRequestFullScreen) {
                movie[0].mozRequestFullScreen();               

            } else if (movie[0].webkitRequestFullscreen) {
              movie[0].webkitRequestFullscreen();
            }
            ...
});

Does anyone know how to fix that?

Upvotes: 0

Views: 9130

Answers (2)

Alain DENIS
Alain DENIS

Reputation: 1

if someone has the video size problem in full-screen mode in Chrome Android context;

the problem may come from default page zoom ; parameters / content parameter / Accessibility / default page zoom. set it back to 100% (or around 91%) and it should be good.

and a faster way, not modifying parameters, is to show the web page in 'version for computer' (parameter three dots) and from there, put the video in full-screen mode.

friendly

Upvotes: 0

user2718671
user2718671

Reputation: 2976

Found a solution! The problem was a conflict between the default html5 video controls of Chrome an my customized controls. Thanks to an answer of this question: hide video controls in fullscreen mode I found out that the problem is resolved by using the css rule:

video::-webkit-media-controls {
  display:none !important;
}

Upvotes: 3

Related Questions