jPlayer fullscreen while inside IFRAME?

Question

Can jPlayer's fullscreen be made to work while inside an IFRAME tag? As is, the "full screen" is restricted by the size of the iframe.

EDIT:

Here's how I insert jPlayer in an IFRAME:

<div id="movieContainer" >
  <object id="videoTut" name="videoTut" type="text/html" data="/videotutorial/videotut.html">
  </object>
</div>

Where videotut.html contains a full HTML page that contains jPlayer and works if loaded independently. And the object tag is modified using code like document.getElementById('movieContainer').innerHTML = '....

Also see: https://groups.google.com/forum/#!topic/jplayer/IQxIIYhtAnE

(P.S. If you'd like to help me out on a multiple video design for jPlayer, please do so here: jPlayer multi-video demo code?)

Answer 1

put this in iframe

<iframe /* your iframe code */ webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true"></iframe>

and add this in js file

$("a.jp-full-screen").on('click', function() {
    var docm, rqst;

    docm = document.documentElement;
    rqst = docm.requestFullScreen || docm.webkitRequestFullScreen || docm.mozRequestFullScreen || docm.msRequestFullScreen;

    if(typeof rqst!="undefined" && rqst){
        rqst.call(docm);
    }
});
$("a.jp-restore-screen").on('click', function() {
    var docm, rqst;

    docm = document;
    rqst = docm.cancelFullScreen|| docm.webkitCancelFullScreen || docm.mozCancelFullScreen || docm.msCancelFullScreen || docm.exitFullscreen;
    if(typeof rqst!="undefined" && rqst){
        rqst.call(docm);
    }
});

i'm not sure if this works with the flash solution

Answer 2

Well, the iframe cannot be larger than the dimensions assigned to it. That's fundamental. So unless the iframe itself takes up 100% of the height and width of the screen, then no, I don't believe you can play the movie at "fullscreen" size. Similarly, you cannot play an object at a size larger than the dimensions assigned to it. If you do have control over the whole screen, then you can dynamically resize the height and width of the iframe as well as the object contained within it -- when it comes time to activate or deactivate the media. Watch it, though, as that can be a slippery slope. You may find inconsistent behavior among browsers and will probably have to spend some time troubleshooting browser-specific layout issues.

All that said... If jPlayer is using Flash to play the movie rather than html5, you CAN add the "allowfullscreen" attribute to the iframe, and that should allow the movie to play outside the iframe size. But Flash is a fallback for jPlayer, so you'll want to see if you can specify the format, or else you might just want to use swfobject.js to load the Flash movie rather than use jPlayer. Again, there'll probably be inconsistency with browsers, so you'll want to allow time for that.

Answer 3

For me below code worked

$(".jp-full-screen").on('click', function () {
        var docm, rqst;

        docm = document;
        rqst = docm.requestFullScreen || docm.webkitRequestFullScreen || docm.mozRequestFullScreen || docm.msRequestFullScreen;

        if (typeof rqst != "undefined" && rqst) {
            rqst.call(docm);
        }
    });

Full screen activates when we click on button and disables clicking on button again

<button class="jp-full-screen" role="button" tabindex="0">full screen</button>

Make sure webkitAllowFullScreen mozallowfullscreen allowFullScreen are added on iframe.

Answer 4

I looked at the jplayer's API and it appears you can set the size of the jplayer to be fullscreen even inside an iframe page!

Their doc's explains how to use Set Fullsize Option in the iframe page your loading up.

Following that Set Fullsize Option link shows the options, of which 2 of the 3 default values your interested in are shown here:

width
    String : (Default: [Video:"100%"] [Audio:"0px"]) : The width as a CSS rule.
height
    String : (Default: [Video:"100%"] [Audio:"0px"]) : The height as a CSS rule.

To view a live example of setting that option is easy thanks to their jPlayer's Development Tester on this page.

Here are the instructions to try it out:

1. Click the blue link titled solution:"html, flash" at the top of the page.
2. Scroll down to the first item of the line titled setMedia(A:{m4v}) and click that.
3. Finally, set the fullscreen size by scrolling down to gray highlight titled sizeFull and set to 360p.

Now click play on the created jplayer below! Then during play, clicking the fullscreen button will increase the jplayer to maximum size define by 360p.

For your iframe page requirements, the maximum size would not be the default settings since that's 100% of the iframe container.

Instead, use JavaScript to specify the size of the client's screen width and height dimensions, thus making it fullscreen outside the iframe page. Example:

screen.height;
screen.width;

To be sure, the value for Video width and height can be in percentage as shown or in pixels. The following is then wrapped in quotes to be as string as shown in the above example.

[Video: "'" + screen.height + "px" + "'"]
[Video: "'" + screen.width + "px" + "'"]

The above may not work if the iframe is not on the same domain, but I see that's not an issue for you.