Embedding Twitch live stream in an html doc that I open in browser

Insights
1

Hello
(Most of what I do is copy/paste or testing stuff because I’m trying to learn JS on the side while getting taught HTML)
Lately I’ve been trying to get to work an embedded Twitch stream next to a YT stream, I don’t have a site, I just type the code into a text editor and open that with Chrome. Here’s the full code:

<!DOCTYPE html>
<html>
 <body>
  <div id="player"></div>
    <script>
     var tag = document.createElement('script');

     tag.src = "https://www.youtube.com/iframe_api";
     var firstScriptTag = document.getElementsByTagName('script')[0];
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
     var player;
      function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
	 height: '720',
	 width: '1280',
	 videoId: 'bwqGB2hbxmg',
	 events:	{
	 'onReady': function (event) 	{
	 event.target.setVolume(25);
	      				}
	    		}
	  				 });
					 }
    </script>

  <div id="twitch-embed"></div>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script type="text/javascript">
	var embed = new Twitch.Embed("twitch-embed",	{
         width: 854,
         height: 480,
         channel: "rangerzx",
         layout: "video",
         autoplay: false,
							});
    </script>
 </body>
</html>

I can get the YT livestream to work, but Twitch shows me an error in German:
“Huch! Diese Einbettung ist falsch konfiguriert.
(Entwickler: In eurer Browserkonsole erfahrt ihr mehr.)” which roughly translates to: “This embed is configured falsely, in your browser console you’ll find out more”

One thingI can find is: https://embed.twitch.tv/embed-error.html?errorCode=NoParent&content=embed.twitch.tv%2F%3Fautoplay%3Dfalse%26channel%3Drangerzx%26height%3D480%26layout%3Dvideo%26migration%3Dtrue%26parent%3D%26referrer%3Dfile(where the doc is saved)
The other is a long dump of text from my console: https://textsaver.flap.tv/lists/3tqi
I have no idea what to do with this and I’m hoping anyone can take the time to help me.

2

If the URL to the page is file:// it won’t work

It has to be http://localhost/ (any port should work) or a proper URL.

1 Like
3

Alright, I set up a localhost with Python and ran the file on it, it seems to be working just as intended, thank you so much!!