Twitch Embedded Player Migration - Timeline Update

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.

To give any suggestions can I ask that you be more specific in exactly what you are doing? Where you are inputting the embed code (Because you have 4 generic options in squarespace)? Or what examples of changes you attempted to make to the above codes suggestions to adapt for your page?

Ive been using the embed code option and trying both the JS and iframe codes. Like someone stated earlier it does work while viewing in edit mode but not live site version. Ive been playing with my site embed addresses but still no luck.

Are you able to post the specific code examples and those details here?

I was hoping to use the JS incase it gave me more flexibility. The last code Ive been trying is yours.

<iframe src="https://player.twitch.tv/?channel=monstercat&parent=carlos-trevino-dxzy.squarespace.com&parent=djpromote.com&parent=www.carlos-trevino-dxzy.squarespace.com&parent=www.djpromote.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="100%"></iframe>

using “monstercat” just to test a constant feed

my domain name (djpromote.com) is pointing to the squarespace site (carlos-trevino-dxzy.squarespace.com)

all that is done via DNS settings but I forgot how its currently setup

Try just this:

<iframe src="https://player.twitch.tv/?channel=monstercat&parent=carlos-trevino-dxzy.squarespace.com&parent=djpromote.com&parent=www.djpromote.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="100%"></iframe>

If that doesn’t work my suggestion is to attempt to change your Squarespace domain name to carlostrevino.squarespace.com.

Ok thanks! I changed my domain name but still no luck. I’ll keep looking for a workaround

It sounds stupid but you have SSL enabled on squarespace right? I actually had to turn on the additional force encryption option on too.

1 Like

Yooooo THAT WORKED! It was on the “insecure option”

2 Likes

I’ve tried all these options and for some reason it’s not working for my set. cretinhop.net. which i desperately need to figure out as I have a live stream scheduled to take place tomorrow (Saturday June 13th). God bless this forum as i’ve been going crazy for the last two days trying to figure out what I did wrong. Didn’t realize there was an update until now.

I don’t see an embed on that page you have linked so I’m not able to help you. Judging by your link the it’s being served over HTTP, where as embeds now required SSL so you MUST serve your site over HTTPS if you wish to use an embed.

Also as a side note, in case you’re unaware, your site breaks when using a script blocking browser extension. Rather than fail safely and just display an error, your site continues to use a lot of CPU resources to try and load the page but constantly fail if scripts are not enabled.

This is the actual page I’m trying to embed the twitch channel. I did my best using the code provided i. This thread and displays as an Embed page (only on the back end) but it doesn’t seem to work as the Video Block I previous had it as. Which is what I need since I was using a custom thumbnail.

http://www.cretinhop.net/cretintv

I tried to edit the embed code to what it needs to be but I’m not well versed here so it’s not displaying properly as you mention. Just getting a fail message.