I've been searching around for a long time but still haven't found a valid solution for my problem. I just cant seem to get the video player to enter fullscreen. The API does have many examples but none of them seem to work.
The jQuery version included on the page I am currently working on is 1.8.2. Also, I am using parallax-1.1.js and libraries required for it to work properly so that may also be an issue.
The client I am working for wants the site to have responsive design, with the ability of the player to directly go to fullscreen when the "Play" button is clicked. This functionality should be avalable both on desktop, and mobile/tablet browsers. On the video page, there should be 3 video players, each of them has unique IDs, and they also have a common CSS class.
Some of the code I tried didn't work well. Here's an example JS code snippet controlling one of the video HTML tags.
Example:
player1 = _V_('video-1');
player1.on("play",
function () {
this.requestFullScreen();
});
player1.on("ended",
function () {
this.cancelFullScreen();
});
The code generates this error:
Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'
I am working with the latest version of Google Chrome.