2d:null 2e:["$","title",null,{"children":"Full Screen Presentation proof of concept | Benjamin Atkin | Observable"}] 33:[] 31:{"id":"1124b1f72b18a9ec","slug":"full-screen-presentation-proof-of-concept","title":"Full Screen Presentation proof of concept","thumbnail":"5d33dfa61f56833a81ff8ce0a9d615db8f8f61913b4a7ca5b930dcd68b8aa4df","access_level":"public","create_time":"$D2018-07-12T04:15:54.513Z","update_time":"$D2018-07-12T04:28:56.323Z","view_time":null,"first_public_time":"$D2018-07-12T04:19:16.924Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"037d14fb7fd36dd8","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":"starter_2024"},"version":16,"publish_version":16,"role":null,"authored":false,"authors":[{"type":"individual","id":"fdc30039652586fd","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":null}],"members":[{"type":"individual","id":"fdc30039652586fd","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Full Screen Presentation proof of concept","cells":[{"id":0,"value":"md`# Full Screen Presentation proof of concept\n\nThis worked for me in Chrome, Safari, and Firefox. I also tried it in a nested iframe, and that only worked in Chrome.\n\n[It works in CodePen, as well](https://codepen.io/bat/pen/wxawmY) - both use iframes with [allowfullscreen](https://www.allowfullscreen.com/) for user-generated content. It's a reasonable choice IMO. Letting it take over the browser window would enable spoofing, but taking over the full screen is kinda obvious. It's also important for video. That said, be careful when viewing user-generated code sandbox content while browsing the web full-screen!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"{\n const div = html`

JavaScript rocks!

\n \n

`\n const presentation = div.querySelector('.presentation')\n const button = div.querySelector('button')\n button.addEventListener('click', () => {\n const props = ['requestFullscreen', 'msRequestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen']\n for (var prop of props) {\n if (presentation[prop]) {\n presentation[prop]()\n return\n }\n }\n })\n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"