Last active
September 3, 2024 12:50
-
-
Save 5310/19fabed0932f9cd7711ac354e26debe5 to your computer and use it in GitHub Desktop.
Twitch Player + Chat #web
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| A simple page that loads both the Twitch.tv player and the chat window following their embedding API, so it actually works when embedded. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Twitch Player + Chat</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| main { | |
| min-height: 100dvh; | |
| display: grid; | |
| grid-template-rows: minmax(auto, 30vh) 1fr; | |
| @media(aspect-ratio > 1/1) { | |
| grid-template-columns: 1fr minmax(300px, 30vw); | |
| grid-template-rows: unset; | |
| } | |
| iframe { | |
| display: block; | |
| border: none; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <iframe id="player" src="https://player.twitch.tv/?allowfullscreen=false&autoplay=false&channel=CHANNEL&chat=true&muted=true&parent=PARENT&parent=vdo.ninja"> | |
| </iframe> | |
| <iframe id="chat" src="https://www.twitch.tv/embed/CHANNEL/chat?parent=PARENT&parent=vdo.ninja"> | |
| </iframe> | |
| </main> | |
| <script> | |
| const _channel = "CHANNEL"; | |
| const _parent = "PARENT"; | |
| const url = new URL(location) | |
| const channel = url.searchParams.get('channel') ?? 'liveyetvirtual' | |
| const parent = url.searchParams.get('parent') | |
| const frames = [...document.querySelectorAll("iframe")]; | |
| frames.forEach(e => { | |
| e.src = e.src.replace(_channel, channel).replace(_parent, url.hostname) + `&parent=${parent}` | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment