Skip to content

Instantly share code, notes, and snippets.

@TheCyberQuake

TheCyberQuake/TwitchTvEmbedOnlyWhenLive.html

Forked from capperstrnd/TwitchTvEmbedOnlyWhenLive.html
Last active November 11, 2024 20:08
Show Gist options
  • Save TheCyberQuake/a1bc927e321caab614b9092bf6cf685e to your computer and use it in GitHub Desktop.
Save TheCyberQuake/a1bc927e321caab614b9092bf6cf685e to your computer and use it in GitHub Desktop.
Download ZIP
A simple script for embedding Twitch stream only when the channel is live, otherwise it is hidden.
Raw
TwitchTvEmbedOnlyWhenLive.html
<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>
@gravelfreeman
Copy link

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!

@Biggbaffoo
Copy link

1 that helps me. After I sign up what should I do with the script, thanks

@TreyBastian
Copy link

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