Can I use the Fullscreen API in JSFiddle?

Question

I have the following JSFiddle, http://jsfiddle.net/brantolsen/ejUWt/. It does the simple task of changing from full screen to non-full screen each time the body is clicked using the Fullscreen API. This works correctly when all content is copied into a local web page and is correct according to the documentation found here. However, on JSFiddle nothing happens.

Is is possible to make example code on JSFiddle go full screen?

Please note that I do not mean viewing the result as full screen, but getting the javascript full screen commands working.

score 35 · Answer 1 · edited May 01 '17 at 01:32

35

You view the result in full screen like this -

http://jsfiddle.net/brantolsen/ejUWt/embedded/result/

Just click the share button on top -

enter image description here

Update: The "Share" button no longer is displayed at all. You can still get the full screen display by manually adding embedded/result/ to the end of the URL of your Fiddle

edited May 01 '17 at 01:32

jonsca

1,732
18
23
44

answered May 09 '12 at 20:34

Bibhas

4,330
17
22

John Henckel · Answer 2 · 2017-04-07T09:10:39.867

8

Use http://fiddle.jshell.net/your-fiddle-id/show/light/ for example this fiddle URL. This will open it without any frames.

edited Apr 07 '17 at 09:10

answered Apr 04 '16 at 14:02

John Henckel

201
2
8

score 3 · Accepted Answer · answered May 09 '12 at 22:14

Found the reason after playing around with Chrome and inspect element. The result code is placed inside an iframe which disallows full screen commands.

I was able to temporarily work around this by adding mozallowfullscreen and webkitallowfullscreen, found at https://developer.mozilla.org/en/HTML/Element/iframe, to the iframe through the use of firebug and Chrome's debug tools.

However, it does not look like JSFiddle will allow you to customize the iframe that the code is wrap in at this time.

score 2 · Answer 4 · edited Nov 04 '14 at 07:12

I think the other respondents to your thread looked at the iframe (crossdomain) issues and ignored the question.

Another awesome JSFiddle user, Jennifer Perrin, answered more than half your question in her post "Get current page URL and title with jQuery".

All that remains for you to do is to apply some logic on the URL returned and fashion it into a functional http://jsfiddle.net/[userid]/[postid]/embedded/result/ link in an anchor that changes it's href to toggle fullscreen.

Can I use the Fullscreen API in JSFiddle?

4 Answers4