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> |
Hi and thank you for this script.
I would like to know if there's a way to hide all the information when mouse hover the player.
Top: Black shadow overlay.
Top left: Channel Name, Streaming for X viewers, Language Tag, Profile Picture Thumbnail and Follow Button.
Top Right: Live Tag.
Bottom: Back shadow overlay.
Bottom Left: Pause and Mute buttons
Bottom Right: Settings, Clip, Fullscreen and Twitch link Icons.
Basically removing everything but the actual stream.
Thank you very much if you can help me sort this out!
1 that helps me. After I sign up what should I do with the script, thanks
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
im interested in this as well. would it be possible to input a list of streamers then just pick one and show it or switch between them?