Forked from TheCyberQuake/TwitchTvEmbedOnlyWhenLive.html
Last active
May 9, 2024 13:07
-
-
Save seanmcnally98/093880d7b0f0d476ab150183db991ed3 to your computer and use it in GitHub Desktop.
Responsive script for embedding Twitch stream only when the channel is live, otherwise it is hidden. See lines 57 and 67 for values you need to change (see the comments written at end of those lines). Original hide/show code forked from momeenme, then TheCyberQuake. Responsive code copied from from https://philna.sh/blog/2020/03/23/responsive-tw…
This file contains 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; } | |
| #twitch-video { | |
| padding-top: 56.25%; | |
| position: relative; | |
| height: 0; | |
| } | |
| #twitch-video iframe{ | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| } | |
| .twitch-container .twitch-chat { | |
| height: 400px; | |
| } | |
| .twitch-container .twitch-chat iframe { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| @media screen and (min-width: 850px) { | |
| .twitch-container { | |
| position: relative; | |
| } | |
| #twitch-video { | |
| width: 75%; | |
| padding-top: 42.1875%; | |
| } | |
| .twitch-container .twitch-chat { | |
| width: 25%; | |
| height: auto; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script src= "https://player.twitch.tv/js/embed/v1.js"></script> | |
| <div class="twitch-container"> | |
| <div id="twitch-video" class="hide"> | |
| </div> | |
| <div class="twitch-chat"> | |
| <iframe | |
| frameborder="0" | |
| scrolling="no" | |
| src="https://www.twitch.tv/embed/USERNAME/chat?parent=YOURWEBSITE.com&parent=www.YOURWEBSITE.com" <!-- Change the CHANNELNAME to the desired twitch handle. Change the parent website in the URL here to the actual place you're running the script from, otherwise twitch will throw an error. Must do versions with and without www. Only put the root URL of your website, no need to put in the specific page.--> | |
| height="100%" | |
| width="100%" | |
| allow="autoplay"> | |
| </iframe> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var options = { | |
| channel: "USERNAME", // TODO: Change this to the streams username you want to embed | |
| height: 360, | |
| width: 640, | |
| }; | |
| var player = new Twitch.Player("twitch-video", 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-video").classList.remove('hide'); | |
| document.getElementById("twitch-container").classList.remove('hide'); | |
| player.removeEventListener(Twitch.Player.ONLINE, handleOnline); | |
| player.addEventListener(Twitch.Player.OFFLINE, handleOffline); | |
| player.setMuted(false); | |
| } | |
| function handleOffline() { | |
| document.getElementById("twitch-video").classList.add('hide'); | |
| document.getElementById("twitch-container").classList.add('hide'); | |
| player.removeEventListener(Twitch.Player.OFFLINE, handleOffline); | |
| player.addEventListener(Twitch.Player.ONLINE, handleOnline); | |
| player.setMuted(true); | |
| } | |
| </script> | |
| </body> |
could this be updated to allow for a list of streamers to choose from?
I am asking the same. Can this be updated to show multiple live streams using a list of usernames.
I just set this up but only the stream embed works. The chat portion seems to not connect. Tried with multiple creators who were currently live.
Did I do something wrong here?
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div class="twitch-container">
<div id="twitch-video" class="hide">
</div>
<div class="twitch-chat">
<iframe
frameborder="0"
scrolling="no"
src="https://www.twitch.tv/embed/mosesfrnchtoast/chat?parent=twitch.tv/&parent=www.twitch.tv/"
height="100%"
width="100%"
allow="autoplay">
</iframe>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Can this play while mobile screen is locked?
Twitch stream stops when user locks screen on mobile or when navigating between apps