如何让fiddles进入全屏？

Question

我试图创建一些 POC 来尝试使用 jwplayer，但由于某种原因，jwplayer 的全屏无法正常工作。

有什么办法可以在 jwplayer 的 jsfiddle 中全屏工作吗？

Here is my jsfiddle

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

Answer 1

您可以点击分享按钮，然后获取全屏结果 URL，打开它，在播放器中转到全屏，然后（可选）点击 F11

另一种快捷方式：右键点击jsfiddle结果-->查看框架源-->在查看源选项卡中取出iframeURL并打开它，播放器应该全屏工作。如果你打算使用fiddle作为演示，你可以写一些javascript来获取底层iframe的url并在新的window中打开它。

Answer 2

回答太晚了，但由于现在没有可用的分享按钮，进入全屏的新方法是复制 fiddle 的 URL 并向其附加 /show。

示例：https://fiddle.net/xyz123/show/

这只会全屏显示结果框。

Answer 3

打开浏览器的控制台并运行这个：

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

这将在“嵌入”按钮旁边添加一个带有“全屏”文本的按钮。如果你点击它，你的浏览器应该全屏显示结果。

或者，如果您不想每次编辑 fiddle 时都在浏览器控制台中粘贴内容，请使用用户脚本：

// ==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'))

在您最喜欢的用户脚本管理器中创建一个新脚本，然后将代码复制粘贴到其中。

Answer 4

仅限 Firefox：

在 Jsfiddle
Select“这一帧”
Select“只显示这一帧”
页面将仅在全屏模式下重新加载结果（其中没有“运行这个 fiddle” 横幅。）

但是有时这不起作用，我不知道为什么，但是您总是可以像 Zameer Fouzan 所说的那样在 URL 中添加“/show”。如果您不想看到“在 Jsfiddle 中编辑”按钮，您可以随时将其删除：

将“/show”添加到 URL 并按 ENTER
按“运行这个 fiddle” 按钮
在 FireFox 中按 F12 进入开发者模式或Chrome
在 firefox 中按：CTRL + SHIFT + C 从页面中选择一个元素
点击“在Js中编辑fiddle”按钮，对应的代码会高亮显示
右键单击突出显示的代码行
Select“删除节点”
按 F12 关闭开发者模式

如何让fiddles进入全屏？

How can I make fiddles enter full-screen?

fullscreen

jwplayer

jsfiddle

video-player

jwplayer6