Forked from capperstrnd/TwitchTvEmbedOnlyWhenLive.html
Last active
November 11, 2024 20:08
-
-
Save TheCyberQuake/a1bc927e321caab614b9092bf6cf685e to your computer and use it in GitHub Desktop.
A simple script for embedding Twitch stream only when the channel is live, otherwise it is hidden.
This file contains hidden or 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
| <html> | |
| <head> | |
| <style> | |
| .hide { display:none; } | |
| /* Optional: The following css just makes sure the twitch video stays responsive */ | |
| #twitch { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 */ | |
| padding-top: 25px; | |
| height: 0; | |
| } | |
| #twitch object, #twitch iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src= "https://player.twitch.tv/js/embed/v1.js"></script> | |
| <div id="twitch" class="hide"> | |
| </div> | |
| <script type="text/javascript"> | |
| var options = { | |
| channel: "USERNAME", // TODO: Change this to the streams username you want to embed | |
| width: 640, | |
| height: 360, | |
| }; | |
| var player = new Twitch.Player("twitch", options); | |
| player.addEventListener(Twitch.Player.READY, initiate) | |
| function initiate() { | |
| player.addEventListener(Twitch.Player.ONLINE, handleOnline); | |
| player.addEventListener(Twitch.Player.OFFLINE, handleOffline); | |
| player.removeEventListener(Twitch.Player.READY, initiate); | |
| } | |
| function handleOnline() { | |
| document.getElementById("twitch").classList.remove('hide'); | |
| player.removeEventListener(Twitch.Player.ONLINE, handleOnline); | |
| player.addEventListener(Twitch.Player.OFFLINE, handleOffline); | |
| player.setMuted(false); | |
| } | |
| function handleOffline() { | |
| document.getElementById("twitch").classList.add('hide'); | |
| player.removeEventListener(Twitch.Player.OFFLINE, handleOffline); | |
| player.addEventListener(Twitch.Player.ONLINE, handleOnline); | |
| player.setMuted(true); | |
| } | |
| </script> | |
| </body> | |
| </html> |
I've managed to simplify the responsiveness of this without defining the iframe specifically and just embeding based off how twitch.tv reccomends using the script.
const options = {
channel: "CHANNEL NAME HERE",
height: 576, // whatever your height should be for your aspect ratio this ultimate gets overridden by the css
width: '100%',
layout: 'video',
parent: ['localhost'] // put your URL here
};
const twitchPlayer = new Twitch.Embed("twitch-video", options);```
then use this css
```css
#twitch-video iframe {
height: 100%;
aspect-ratio: 16 / 9;
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 that helps me. After I sign up what should I do with the script, thanks