-
-
Save TheCyberQuake/a1bc927e321caab614b9092bf6cf685e to your computer and use it in GitHub Desktop.
| <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> |
works like a charm ! thank you 👍
Is there a way to include chat with this?
how can i add the chat?
In theory you could add chat, but I just don't really see the point as this is designed more to be in a sidebar, hence the low resolution set. Theoretically possible to add chat, you would basically just need to add the chat embed and then add more lines into the functions
like the "document.getElementById("twitch").classList.remove('hide');" to also include adding/removing hide to the chat element as well. I don't use this at all anymore though so I have no good way to really test that theory
I made a fork that includes the chat: https://gist.github.com/seanmcnally98/093880d7b0f0d476ab150183db991ed3. Hopefully someone with a bit more experience can make this look prettier. This will look fine as long as your viewport is at least 1280px.
EDIT: Figured it out myself! Updated to make it responsive.
is that possible for multiple streamers?
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?
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;
}
is that possible for multiple streamers?