CODEWITHSUNDEEP
jqueryhtmlvideo
Nyoc
Nyoc

Reputation: 11

HTML5 video player full screen not working

I have a page where I inserted a few html5 videos using the video tag 

<video>whatever</video>

These videos are inside a div that I can move from different positions when the browser window is resized.I move the divs using the Jquery function appendTo The videos play fine and are moved without any problem.

The problem is when I click on the full screen button of the player, it does not work. Before moving it, the video is shown correctly in full screen.

Any idea how to fix this?

Upvotes: 1

Views: 2136

Answers (1)

Zaerdna
Zaerdna

Reputation: 1

I made this code today for toggeling fullscreen for all browsers:

 function toggleFullscreen() {
            if (document.fullScreen)
                    document.cancelFullScreen();
            if (document.webkitIsFullScreen) {
                    document.webkitCancelFullScreen();
            } else if (document.msIsFullScreen) {
                    document.msExitFullscreen();
            } else if (document.mozIsFullScreen) {
                    document.mozCancelFullScreen();
            }
            else {
                    if (document.cancelFullScreen)
                            videoHolder.requestFullscreen();
                    else if (document.webkitCancelFullScreen)
                            videoHolder.webkitRequestFullScreen();
                    else if (document.msExitFullscreen)
                            videoHolder.msRequestFullscreen();
                    else if (document.mozCancelFullScreen)
                            videoHolder.mozRequestFullScreen();
            }
    }

Replace "videoHolder." with your video element.

You can now run toggleFullscreen() in javascript to toggle fullscreen. Hope this is what you were looking for.

Upvotes: 0

Related Questions