JPlayer full screen while inside iframe?

Question

Is it possible to make jPlayer full-screen mode to work in the IFRAME tag? As with full screen, the iframe file size is limited.

EDIT:

This is how I insert jPlayer into IFRAME :

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

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

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

(PS If you want to help me create several video projects for jPlayer, do it here: jPlayer demo code for several videos? )

Answer 1

put this in an iframe

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

and add this to 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 flash solution

Answer 2

Well, an iframe cannot be larger than the sizes assigned to it. This is fundamental. Therefore, if the iframe itself does not occupy 100% of the height and width of the screen, then no, I don’t think you can play the movie in full screen format. Similarly, you cannot play back an object with a size larger than the dimensions assigned to it. If you have control over the entire screen, you can dynamically change the size and width of the iframe, as well as the object contained in it, when it comes time to activate or deactivate the medium. Look, although it may be a slippery slope. You may find inconsistent behavior among browsers, and you may have to spend some time troubleshooting the browser.

All that is said ... If jPlayer uses Flash to play the movie, not html5, you can add the "allowfullscreen" attribute to the iframe, and this should allow the movie to play outside the iframe size. But Flash is a reserve for jPlayer, so you want to see if you can specify the format, otherwise you can just use swfobject.js to download the Flash movie, and not to use jPlayer. Again, there is likely to be inconsistency with browsers, so you'll want to give time for this.

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 mode is activated when we press the button and disables the button press again

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

Make sure webkitAllowFullScreen mozallowfullscreen allowFullScreen is added to the iframe.

Answer 4

I looked at the jplayer API , and it looks like you can set the size of jplayer full screen mode even inside the iframe page !

Their document explains how to use Set Full Size on an iframe page.

After that, the Set full size link shows the parameters, of which 2 of 3 the default values that interest you 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 this parameter is easy thanks to the jPlayer development test on this page.

Here are the test instructions:

1. Click the blue link : "html, flash" at the top of the page.
2. Scroll down to the first element of the line called setMedia(A:{m4v}) and click on it.
3. Finally, set the full-screen size by sizeFull to a gray selection called sizeFull and set the value to 360p .

Now click play on the created jplayer below! Then, during playback, pressing the full-screen button increases jplayer to its maximum size using 360p .

For iframe page requirements, maximum size will not be the default settings, as this is a 100% iframe container.

Instead, use JavaScript to specify the width and height of the client screen, thereby making it fullscreen outside the iframe page. Example:

 screen.height; screen.width; 

Of course, the Width and height of the video can be a percentage, as shown or in pixels. Next, the string is wrapped in quotation marks as strings, as shown in the above example.

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

The above may not work if the iframe is not in the same domain, but I see that this is not a problem for you.