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: 9113

Answers (1)

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