-
-
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> |
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;
}
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.