Twitch Embedded Player Migration - Timeline Update

Im using.
< iframe src=“https://player.twitch.tv/?channel=daaxplays&parent=www.serenitygaming.ca” frameborder=“0” allowfullscreen=“true” scrolling=“no” height=“378” width=“620”>

Oh i just fixed it by removing the www.

With the new changes in effect, it seems to be impossible to embed video or chat on a custom SSL domain for a local dev environment not running on the default port for SSL. Always get an empty frame with the “player.twitch.tv refused to connect.” browser error.

Basically we have a local loopback to our company dev domain, with a self-signed SSL cert, that runs the frontend portion of our app on port 3000. If I force the app port to be 443 (default SSL port) the embed works fine, but when using the custom port the embed fails to load, and makes it impossible to use in our dev environment. In both cases, the automatically injected parent value for the live stream embed is our fully qualified domain name without the protocol prefix or the port suffix (adding either of these results in the twitch error message indicating that the embed has been misconfigured).

@jbulava could you maybe have someone check this, it should be pretty simple to reproduce with a Create React App set up with HTTPS=true (this will also cause it to auto-generate the self-signed certs) and a custom non-localhost hostname, running at the default 3000 port

You probably want

<iframe src=“https://player.twitch.tv/?channel=daaxplays&parent=www.serenitygaming.ca&parent=serenitygaming.ca” frameborder=“0” allowfullscreen=“true” scrolling=“no” height=“378” width=“620”>

For full coverage of your website if non www/with www redirects to the other of leaves it as is

1 Like

I use the chat embed inside an Electron app. the new CSP blocks apps running locally embedding if you use electron. The origin: "file://" is blocked by the csp. Is there anyway around this?

I get the player.twitch.tv refused to connect error when accessing my website via Chrome on Android. It works fine from desktop computers in both Chrome and Firefox.

Any idea what’s going on?

Edit: It seems to work on my Android phone but not on my slightly older Android tablet.

Edit 2: Nevermind. It seems Chrome on my Android tablet cached an old version of the embed code and I had to explicitly flush the browser history which fixed the issue.

This scenario is expected. Since a port part cannot be supplied as part of the parent value, we assume port 80 (HTTP) for localhost and 127.0.0.1/8 parent values and port 443 (HTTPS) for all other domains.

As a non-React developer, I want to confirm I got this correct. Is port 3000 the default port for all React apps, or does the port differ for HTTP and HTTPS? Once I know that, I’ll pass this information onto the engineering team. At this time though, we only support the 80/443 ports as mentioned above.

Update: As of June 10, we accept any port for local development.

Not that I’m aware of, I’ll forward this along to the embeds team.

1 Like

In most boilerplates and the official Create React App setup, the default port will be 3000 yeah. That being said, it’s completely user configurable, so not something that can be counted on (and some devs will run their APIs on that port so frontend would be on another).

The problem in assuming 80 and 443 is that these both require running the dev server with admin privileges (any port under 1024 would require this) and that is not ideal.

The default port for angular I believe is 8100, and it increments by 1 each time you spin up a new dev server, so if you have 2 running it will be 8101. It would be good to add those too

I have a Squarespace website that embeds Twitch channels. The embed codes no longer work (below is an example). Any tips? Do embeds no longer work with Squarespace?

<iframe src="https://player.twitch.tv/?channel=bandsintown&parent=www.djlivestreams.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

Try without the www

Thanks. Tried that, unfortunately doesn’t work either…

I’m in the same situation Casrol. I’m using Squarespace as my hosting service too. I tried without the www in the parent field with the iframe and cant get that to work. I did get the squadrespace based domain to work but only if you are in the squarespace editing mode; doesn’t work for public facing domain. Using the Embed module with the Javascript HTML wrapper does work but you have other issues that go along with that as if you have more than one embed module it will bleed over with others.I would love to get the iframe to work with the parent if i could so more feedback on this would be great. Many of us when into using the embed codes of quick grabs and integrating into websites not needing much more coding experience. More examples and instructions would be helpful here.

Example of what I have gotten to work:

<html>
  <body style="margin:0;">
    <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: "100%",
        height: "378px",
        channel: "projectgeospatial",
        layout: "video",
      });
      function toggleAudio() {
        var player = embed.getPlayer();
        var isMuted = player.getMuted()
        player.setMuted(!isMuted)
      }
    </script>
  </body>
</html>
1 Like

Casrol,

I found a way to get the iframe to work. Notice what I did with mine. I had to make it consider alternate parents for Squarespace. One for the Squarespace root domain, one for your custom domain, and another accounting for the possibility of www in front of the custom domain. All included and then it worked. It should be a nice alternative if you want to use the iframe rather than the javascript.

<iframe src="https://player.twitch.tv/?channel=projectgeospatial&parent=geospatialfrontier.squarespace.com&parent=geospatialfrontier.com&parent=www.geospatialfrontier.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="100%"></iframe>

1 Like

Glad that you got it to work with the iframe. The equivalent for your JavaScript embed should be the inclusion of the parent option as an array. To use your earlier JavaScript code and the parent values you specified in the iframe version, you would have:

<script type="text/javascript">
  var embed = new Twitch.Embed("twitch-embed", {
    width: "100%",
    height: "378px",
    channel: "projectgeospatial",
    parent: ["geospatialfrontier.squarespace.com", "geospatialfrontier.com", "www.geospatialfrontier.com"],
    layout: "video",
  });
  function toggleAudio() {
    var player = embed.getPlayer();
    var isMuted = player.getMuted()
    player.setMuted(!isMuted)
  }
</script>

Thanks for the added Feedback @jbulava . Oddly it worked without the parents but I don’t want to risk losing the connection so I’ll fix that.

1 Like

Ah, ok. I read that wrong. We automatically include the domain where the embed JavaScript is loaded from if you are using the JavaScript embed option, so that’s probably the reason it worked just fine.

1 Like

Thanks Adam! This worked.

1 Like

EDIT I didn’t do anything, but it seems to have come back online using the code below. no changes

So I am also having trouble with embedding both the Javascript and the iFrame versions versions of code, I have tried both

    <div id="twitch-embed"></div>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: "100%",
        height: "96%",
        channel: "atltvhead",
        parent: ["natedamen.com","www.natedamen.com","m.natedamen.com","natedamen.wixsite.com"]
      });
   </script>

and

    src="https://player.twitch.tv/?channel=atltvhead&parent=natedamen.com&parent=www.natedamen.com&parent=m.natedamen.com&parent=natedamen.wixsite.com"
    height="96%"
    width="100%"
    frameborder="0"
    scrolling="yes"
    allowfullscreen="yes">

I am hosting on Wix website. I get the following error about security policy.

I have a gut feeling that like Casrol and Adam_simmons it has to do with the wix’s free domain that is given to everysite, which mine would be natedamen.wixsite.com/natedamen ← that /natedamen is causing an error saying the embed is misconfigured. Without the /natedamen, I get the security errors found in the photo above.

Any help would be appreciated.

none of the codes working for my squarespace layout. just keeps saying embed.twitch.tv refused to connect.