Extending video frame to full-screen from jPlayer using onClick function

Question

functionality:

User is able to access the video page from the main menu. Video will be played automatically, at this moment, the video is not in full screen and for aesthetic purposes, there are no control buttons in the video frame.

Secondly, when user clicks on the video, it will be displayed as full-screen, and when user clicks on the full-screen video, the video will exit the full screen and reverts back to the original video frame size.

What has been done:

I have created the video frame by using the jQuery .jPlayer. And the video is playing automatically when the video page is loaded.

I have attached the following code:

function Footprints() {
  console.log("Footprints");
  
  //Main video player for video page 
  $("#Footprints_1").jPlayer({
    ready: function() {},
    swfPath: "javascript",
    supplied: "webmv, ogv, m4v",
    loop: true,
    size: {
      width: 1450,
      height: 750
    }
  }).bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
    $(this).jPlayer("pauseOthers");
  });
  $("#Footprints_1").jPlayer("setMedia", {
    //set m4v tag to array Footprints VideoList
    m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v"
  }).jPlayer("play");
  $("#Footprints_1").show();


  $("Footprints_1").click(function() {
    console.log("fullscreen")
    $("#Footprints_1").requestFullscreen();
  })
}

<div id="Footprints_Page" align="center" style="position:absolute; background-repeat: no-repeat; display: none; top:0px; left:0px; ">

  <!--Video Player-->
  <div id="Footprints_1" style="position:absolute; top: 180px;"></div>

</div>

Hence, when you run the code, it is showing this:

Issue:

At this point, when I click on the video frame when the video is playing, nothing happens. The video doesn't expand to the full screen.

Hence, how am I able to make the video expand to full screen when I click on the video and and when the video is clicked it reverts back to the original size.

Thanks.

Answer 1

You are currently fighting two three issues. The first is you are not using jplayer's event system. that is why the clicks are being ignored. I added a bind.click to your jplayer decleration, and the clicks responded.

.bind($.jPlayer.event.click, function() { 
    console.log("fullscreen")
    $("#Footprints_1").requestFullscreen();
});

See this Fiddle.

The second issue is that you are calling requestFullscreen() on a jQuery object. It is not part of the jQuery API. You need to be calling it on an HTML element.

document.getElementById("jp_video_0").requestFullscreen();

So, the above example should probably be: (untested)

.bind($.jPlayer.event.click, function() { 
    console.log("fullscreen")
    document.getElementById("jp_video_0").requestFullscreen();
});

If you want to have some control over padding and placement, request fullscreen on the container, and you can use CSS.

 document.getElementById("Footprints_1").requestFullscreen();

However, the third issue is that not all browsers seem to use the same method of requestFullscreen(). See Mozilla docs. For me the following worked in Chrome:

.bind($.jPlayer.event.click, function() { 
    console.log("fullscreen")
    var elem = document.getElementById("Footprints_1");
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }
})

This Post has more info on fullscreen from jQuery as well as info on x-browser issues.

Hope it helps.

Edit: jsFiddle can't demonstrate the Fullscreen API, because I can not add the required 'AllowFullscreen' attribute to their iframe. If you view the frame source of the jsFiddle result, you can just save that as an HTML document, and it should work.