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?)

the iframe that's you want to load can it contain separate content?? as in javascript and html — Yusaf Khaliq, May 22 '12 at 15:32
Yes it can. I've updated the way I perform the `IFRAME`, which is using `OBJECT` tag, in the question above. — Xonatron, May 22 '12 at 15:52
i embarrassingly don't know a lot of JavaScript because i came accross jQuery first, BUT, i suggest using something that when the user clicks on the fullscreen you set a parameter on the url for the iframe which carries the current duration of the video and when the "video player" loads in the iframe it seeks to the duration of the set parameter — Yusaf Khaliq, May 22 '12 at 18:02
@Yusaf, just to be clear, are you suggesting that I modify the size of the iframe when the video plays? — Xonatron, May 23 '12 at 12:07

score 5 · Answer 1 · answered Mar 10 '13 at 15:01

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

Ringo · Answer 2 · 2012-05-26T21:05:45.977

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.

score 0 · Answer 3 · answered Mar 09 '15 at 06:39

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.

arttronics · Answer 4 · 2012-05-27T11:44:09.097

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.

jPlayer fullscreen while inside IFRAME?

4 Answers4

Linked