How can I make fiddles enter full-screen?

Question

I was trying to create some POC to try something with jwplayer but for some reason full screen for jwplayer is not working.

Is there any way to make full-screen work in jsfiddle in jwplayer?

Here is my jsfiddle

    http://jsfiddle.net/hiteshbhilai2010/6YyXH/63/

@EthanJWPlayer : pls check , I tried `primary:flash` and it stopped working .... http://jsfiddle.net/hiteshbhilai2010/6YyXH/74/ — Hitesh, Jan 19 '15 at 10:25

score 54 · Answer 1 · edited Apr 14 '22 at 18:34

54

Answering too late, but as no share button is available now, the new way for going full screen is copying the URL of your fiddle and append /show to it.

Example : https://fiddle.net/xyz123/show/

This will show you only the result frame in full screen.

edited Apr 14 '22 at 18:34

bad_coder

11,289
20
44
72

answered Aug 29 '16 at 18:59

Zameer Fouzan

666
6
15

2

But you will encounter a "run this fiddle" banner. – Anders Lindén Dec 16 '20 at 20:56
2

@AndersLindén which is a security feature apparently, you can just click it – PoolloverNathan May 17 '21 at 01:32
Where share button is gone? – Alex78191 Nov 29 '21 at 19:16

Aram Paronikyan · Accepted Answer · 2015-01-16T13:24:49.257

3

You can click on Share button, then take the Full screen result URL, open it, go to full screen in player and then (optionally) click on F11

Another quick way: right click on jsfiddle result --> View frame source --> In the view source tab take the iframe URL and open it, the player full screen should work. If you are intending to use the fiddle as a demonstration, you can write some javascript to grab the url of the underlying iframe and open it in a new window.

edited Jan 16 '15 at 13:24

answered Jan 16 '15 at 13:02

Aram Paronikyan

1,598
17
22

but still you need to click F11, is it because of stackoverflow? – Hitesh Jan 16 '15 at 13:04
F11 is the common browser hotkey to go to full screen. Since jsfiddle uses iframes, the full screen button of player will expand its panel across the iframe only – Aram Paronikyan Jan 16 '15 at 13:08
@TJ: You can still grab the frame URL by right clicking the area where the player is placed and select "View frame source" (in Chrome). In the new tab you can remove the prefix "view-source:" and you will get the single frame URL. The full screen will work on that page then. Good luck – Aram Paronikyan Jul 11 '16 at 12:13
6

There is no share button – Alex G May 30 '20 at 00:54

LarryN · Answer 3 · 2021-03-21T18:51:10.547

In firefox only:

Right-Click the result window in Jsfiddle
Select "This Frame"
Select "Show Only This Frame"
Page will reload with result only in full screen (without a "run this fiddle" banner in it.)

Sometimes however this won't work, I not shure why, but you can always add "/show" to the URL as Zameer Fouzan has said. If you don't want to see the "Edit in Jsfiddle" button you can always remove it:

Add "/show" to the URL and press ENTER
Press "run this fiddle" button
Press F12 to enter developer mode in FireFox or Chrome
In firefox press: CTRL + SHIFT + C to pick an element from the page
Press the "Edit in Jsfiddle" button, the corresponding code will be highlighted
Right-Click the highlighted line of code
Select "Delete Node"
Press F12 to close developer mode

score 1 · Answer 4 · answered Nov 29 '20 at 18:56

Open your browser's console and run this:

const div = document.createElement('div')
div.classList.add('actionItem', 'visible')
div.style.cursor = 'pointer'

const a = document.createElement('a')
a.innerText = 'Fullscreen'
a.classList.add('aiButton')
a.title = 'Fullscreen'
a.addEventListener('click', function() {
  document.querySelector('iframe[name=result]').requestFullscreen()
})

div.appendChild(a)
document.querySelector('.actionCont').insertBefore(div, document.getElementById('app-updates'))

This will add a button with the text "Fullscreen" next to the "Embed" button. If you click on it, your browser should fullscreen the result.

Or, if you don't want to paste something in the browser console every time you go to edit a fiddle, use a userscript:

// ==UserScript==
// @name        JSFiddle Fullscreen
// @match       *://jsfiddle.net/*
// @version     1.0
// @author      GalaxyCat105
// @description Adds a fullscreen button in the JSFiddle navigation menu when editing a fiddle
// @grant       none
// ==/UserScript==

const div = document.createElement('div')
div.classList.add('actionItem', 'visible')
div.style.cursor = 'pointer'

const a = document.createElement('a')
a.innerText = 'Fullscreen'
a.classList.add('aiButton')
a.title = 'Fullscreen'
a.addEventListener('click', function() {
  document.querySelector('iframe[name=result]').requestFullscreen()
})

div.appendChild(a)
document.querySelector('.actionCont').insertBefore(div, document.getElementById('app-updates'))

Create a new script in your favorite userscript manager and copy-paste the code into it.

How can I make fiddles enter full-screen?

4 Answers4

Linked