June 10th Twitch updated the security for embeds. They have introduced (parent) that adds my domain name to the embed.The coding works on other websites apart from Wix. And as per usual both parties are blaming each other. Could someone please look at this. Does Wix have a work around.
1 Like
How are you adding the html code to your page? If it is just using third party code provided by Twitch themselves, then that is a Twitch issue and not a Wix issue.
https://support.wix.com/en/article/wix-editor-using-iframes-to-display-visible-content-on-your-site
Important:
We cannot provide support for external codes that were not created or tested with Wix. If you are experiencing an issue with your code snippet, please contact the provider directly.
It looks like Twitch and their so called support team have been passing the buck here and not bothering to try to find out why their embed setup does not work with Wix.
, it seems this was happening even before the June 10th Twitch update that you mention.
Instead, they would rather just fob you off with remarks of 'on ānormalā websites it all worksā¦
https://discuss.dev.twitch.tv/t/twitch-chat-embed-does-not-work-on-wix-website/23468/3
https://discuss.dev.twitch.tv/t/embedding-twitch-live-stream-to-wix-com/24206
In simple terms and sorry for yourself that you have to go back and forth here.
Twitch supply you with that block of html that they claim works on every site apart from Wix.
Therefore, the code block is provided by Twitch and their own support should be looking into it to find the reason as to why it does not work.
Wix canāt and wonāt provide free support for Twitch here unless Twitch themselves contact Wix and ask them for help as to why it is not working on the Wix platform.
To put bluntly, this is like you using Twitch and then their own support telling you to go to Periscope or Vimeo for support instead.
And by the way, instead of using html, have you looked at using the Wix VideoPlpayer as that plays Twitch and Vimeo, as you can see here.
https://support.wix.com/en/article/wix-editor-adding-a-video-from-vimeo
https://www.wix.com/corvid/reference/$w.VideoPlayer.html
I would also double check your used html code for this, so that your used html code script matches up with what Twitch own support docs say.
https://dev.twitch.tv/docs/embed/video-and-clips
Also, is your html code being used on a free site or a premium plan site, as on free sites the iFrame is sandboxed, as mentioned in the already linked page.
https://support.wix.com/en/article/wix-editor-using-iframes-to-display-visible-content-on-your-site
Also, look here about live streaming and using an encoder from your desktop.
https://support.wix.com/en/article/about-live-streaming-in-wix-video
Thanks GOS. I have waisted a lot of time trying to resolve this myself. I have also spent time with twitch support and others. The code was tested on other website platforms and worked. I finally called Wix and after 3 agents and six hours they had nothing. I have a business premium account. My personal experience with Wix unfortunately is not a good one. Iām not interested in the blame game. I just want the basic coding to work so that I can get on with other things I need to do. I also do not want the embarrassment of live forum chats highlighting what I already know about both companies. What is obvious is that if this works elsewhere. Why not here. I have scripts for both the live stream and chat box. But for the record Itās not only them who have made comments about Wix.
2 Likes
We had this same problem in our site. Eventually, I was able to get this HTML to work (details omitted in {{ā¦}}, and the links broken so I can post them here):
<iframe
src="https://player .twitch .tv/?channel={{TWITCH_CHANNEL}}&parent={{WIX_SUBDOMAIN}}.wixsite .com&parent={{SOME_UUID}}.htmlcomponentservice .com"
height="100%"
width="100%"
frameborder="0"
scrolling="no"
allowfullscreen="true">
</iframe>
The trick was to add &parent={{SOME_UUID}}.htmlcomponentservice .com, which I think was caused by the way Wix is loading the details for the iFrame. To find the UUID you need, inspect the twitch player when it is not working in your browser tools. When I did, I found something like this:
<iframe sandbox="allow-same-origin allow-forms allow-popups allow-scripts allow-pointer-lock" class="_3HLqS" title="htmlComp-iframe" name="htmlComp-iframe" width="100%" height="100%" data-src="" src="https://{{SOME_UUID}}.htmlcomponentservice .com/get_draft?id={{ANOTHER_ID}} .html"></iframe>
Iām not sure if that UUID will ever change, but it seems to be working for us even after a couple of days.
Justin Kulikauskas ā¦ I have exactly the same problem as youā¦ and a lot of other people! Unfortunately I have zero knowledge of coding or anything technical. I wondered if you could help me pls? In your example ;- {{TWITCH_CHANNEL}}&parent={{WIX_SUBDOMAIN}}.wixsite .com&parent={{SOME_UUID}}.htmlcomponentservice .com"
In the first brackets I put the name of my twitc channel.
In the second brackets where you have Wix_Subdomain what should be entered here pls?
For the 3rd brackets {{SOME_UUID}}.htmlcomponentservice .com I follow that I have to get that info from Twitch player.
I thought that somewhere in the Twitch embed you had to put your website name eg www.karen.pritchard.net as I donāt see this anywhere in your example.
Any help would be greatly appreciated .
Many thanks Karen
Hi Karen. Yes, the first brackets are for the name of your twitch channel.
On the site where I was working on this problem, we didnāt have a custom domain, so our site was at something like āmycoolwebsite. wixsite. comā. Those second brackets are basically the part of the Twitch embed where you need to put your siteās domain. So, using the example URL you gave, you would put this (but no spaces):
&parent=www .karen .pritchard .net
For the third brackets {{SOME_UUID}}, I donāt know of an easy way to discover what to put there. Maybe someone from Wix can give some more insight, but for now I think we are stuck looking through the HTML of the live site. Rather than go through the developer tools, this procedure might be a little easier:
-
Open your webpage where the Twitch embed is not working.
-
View the page source in your browser (I believe most browsers have some option like āView page sourceā in the right-click menu).
-
Ctrl-F (or Cmd-F) and search through the source for āhtmlcomponentserviceā. This should get you to a URL like
data-src="https:// caaf37e0-03a9-4dd8-a856-d48f9b9dacd5 .htmlcomponentservice .com/get_draft?id= 2fdf259f_fa7283d6cb4f .html"
If you go to that page, you should see a Twitch video thing, although it wonāt be working. That domain name (up to .com) will also need to be in the Twitch embed like this (but no spaces):
&parent=caaf37e0-03a9-4dd8-a856-d48f9b9dacd5 .htmlcomponentservice .com
I hope this helps.
1 Like
@justinkulikauskas I encountered the same problem this evening working with a videographer on embedding a Twitch livestream on our website oratoriosocietynj.org. I followed your instructions above, but when I search the page source I did not find the htmlcomponentservice string. Any other suggestions for getting this to work?
The page in question is https://www.oratoriosocietynj.org/live.
Thanks!!
@smiller tl;dr I believe you should try āhttps://player. twitch. tv/?channel=oratoriosocietynj&parent=oratoriosocietynj. org&parent=www-oratoriosocietynj-org. filesusr. comā (with the spaces removed).
The trick is that Wix populates the details for the iFrame from another webpage. So in the source of the original page, there is an iFrame element with a data-src attribute which points to some other somehwat strange name. That strange name
I think the most consistent way to find that element will just be to ctrl-F search through the source for all instances of āiframeā and then find the one with that ādata-srcā attribute. In your case, it connects to that āwww-oratoriosocietynj-org. filesusr. comā domain. I thought they would all be at an ā???. htmlcomponentservice. comā domain, but apparently I was wrong.
Hope this helps.
@justinkulikauskas I plugged in the new code and itās now saying āembed is misconfigured.ā Looking at the page source, I found a wix-iframe tag which had the parameters
tWhen I plug the URL in the data-src attribute (without the spaces) directly into a browser window it renders the streaming window properly, but from within the Wix page itās still NG.
Thanks much for your assistance!
@smiller When I went to the URL in your data-src attribute above, I got the same āembed is misconfiguredā error from Twitch. When I looked at the source of that page, I saw that the twitch link still had a space inside of it, which was causing the problem.
When the twitch embed has an error, you can look at the browserās console (right-click, select inspect, and then there should be a āconsoleā tab in the tools that appear) to find more information. In this case, it said āparent query string value contains invalid characterā which led me towards looking more closely at the embed link.
Hi @Justin Kulikauskas,
Iām not seeing that in the console. I went into Wix and re-saved/published the site and still not seeing the space. I went so far as to copy out the code snippet and paste into a text editor:
Iām seeing the original error:
Refused to frame āhttps://player.twitch.tv/ā because an ancestor violates the following Content Security Policy directive: āframe-ancestors https://oratoriosocietynj.org https://www-oratoriosocietynj-org.filesusr.comā.
My support ticket basically confirmed that the CSP canāt be changed so Iāve put the direct link and a Donate button into the masthead so it shows on all the visible site pages. Disappointing to say the least ā¦ but thatās not directed at you.
Thanks for all your help on this.
Scott
@smiller Youāre right, I just went back to your live page and I see the same thing as you. I havenāt seen that Content Security Policy issue before, sorry Iām not able to help. Good luck!
Iām glad that I saw this prior to paying for/completing my Wix website. I will likely not proceed with Wix if the string given by Twitch works everywhere else but here.
Wix, get this fixed or lose customers. Itās that simple.
@smiller Not sure if this comes a little too late, but since I have had similar issues with the new twitch CSP I checked something on the page in question.
As it is now my browser claims to have the issue but if i open the inspector (F12) and changepart of the iframeās src attribute from āparent=oratoriosocietynj. orgā to āparent=www. oratoriosocietynj. orgā it loads the channel in the embedded window. It looks to me like the parent parameter on the Twitch url needs to include any subdomains (including the common www).
@S.Fox While itās too late for our streaming event from October 3rd, Iāll still try your solution so that if we need to have further such events weāll be able to embed them. Thanks for your response!
I made it with the html option. Can someone post an example of how to do it with java? TY
There is a lot of people that seem to have issues with the twitch embedding and I would like to address the issue and offer a fix. There are two main issues when trying to add a twitch embed to your site. This guide will help you to get your embed up and running smoothly.
First thing needed is to add an iframe box to your webpage. Second you need to copy your embed iframe code from twitch. Go to your twitch stream hit share then copy iframe embed. Once this is done head over to Wix and paste the twitch iframe code into your iframe box you added. Next you must change the parent from =www.example .com to whatever url your site uses. Most people only do this step but the embed still will not show right on wix. This next issue is not a problem on twitch's end its an issue on wix's end.
The second issues that causes your iframe embed to break is when adding a twitch iframe embed to your site for some reason wix likes to take your iframe and nest it into a second iframe. This is called nesting iframes. As you can see in the example below the top iframe in the picture is the one created by wix that your iframe is below it nested. You can see an example in the picture attached. The way to fix your embed is to take the the url from the iframe that you are nested into and add it as a second parent in your original twitch iframe code. For this image we would take the part in between the double slashs // and end with the part that says .com and add it as a second parent in the twitch iframe code. How you add a second parent is easy you just add &parent= and the url and you are good to go. An example of the code can be found down below.
I saw that domain (<>filesusr. com) on inspect elements, as you said, but adding it as a parent didnāt solve the problem. It still says the twitch embed is miss configured.