Twitch Embedded Player Migration - Timeline Update

Announcements
22

Anyone have issues with embed into wordpress with the new iframe? I cant get it to work.

23

if you are using the JS libs it’ll handle it for you otherwise you need to append &parent=yourwebsite.com to the end of the URL

24

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.

25

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

26

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
27

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?

28

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.

29

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.

30

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

1 Like
32

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.

33

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

34

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>
35

Try without the www

36

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

37

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
38

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
39

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>
40

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
41

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
42

Thanks Adam! This worked.

1 Like