Twitch Embedded Player Updates in 2020

Changes are coming to Twitch embedded experiences! We’re updating the way the embedded video player is initiated so that it takes advantage of all the performance improvements we’ve made to the on-site player over the last year. Today we’re announcing the first of multiple changes. Details and examples are included below to begin making code changes at your convenience. There is currently no deadline; a timeline will be provided via a future update to this post.

Update (2020/05/13): These changes will go into effect on June 10, 2020 and has been announced on this post. Please review the action steps below to understand how to update your iframe and JavaScript embeds by this date.

What’s changing?

The iframe and JavaScript code used to deliver Twitch embeds. More specifically, information regarding domain location and ancestors must be included in the iframe and JS code used to deliver Twitch embeds.

Who will be affected by these changes?

Any third-party site or developer currently using embedded Twitch features (chat, video, and everything).

Why are we making these changes?

This implementation is a planned update to our embed architecture that utilizes the most recent enhancements and controls that the onsite Twitch player uses.

When do these changes take effect?

There is currently no deadline for this update; we are sharing this information now to provide plenty of time for code changes. This post will be updated when a timeline has been decided.

What changes do I need to make?

Note: these changes will also be reflected in our developer documentation as soon as possible.

If you embed Twitch in your site (chat, video, or everything), you’ll need to begin including a list of the domains your content appears on using the parent parameter when initializing your Twitch embed. This will help avoid Twitch content on your site being blocked by modern browsers. This list can take the form of a query parameter or a key in a JavaScript configuration object, depending on which embed method you use.

Here are examples for an iframe embed and a JavaScript embed.

Iframe Embeds

If you use a non-interactive iframe embed to include Twitch, add a parent field to your query string. This value should be the full domain (including any subdomain, such as ‘www’) that you are using to embed Twitch. If the player could potentially be embedded on multiple domains, or your page itself could be embedded in another site, you must list additional domains with additional parent fields in the query string.

Before

<iframe src="https://player.twitch.tv/?channel=twitchpresents" />

After

<iframe src="https://player.twitch.tv/?channel=twitchpresents&parent=streamernews.example.com&parent=embeds.example.com" />

JavaScript Embeds

If you use the interactive embed, and your site is embedded in other locations, add a parent key to the options object used to configure the embed to indicate which domains your site is embedded on. The value should be a JavaScript array containing any domains which embed your content. Important note: the site that is consuming our JavaScript embed wrapper (v1.js) will be added for you automatically; if you plan to use this embed on only one domain, then you should not have to take any other action to ensure embed playback.

Before

const embed = new Twitch.Embed("twitch-embed", {
  channel: "twitchpresents",
})

After

const embed = new Twitch.Embed("twitch-embed", {
  channel: "twitchpresents",
  parent: ["streamernews.example.com","embeds.example.com"]
})

Reiterating the use of multiple parent values

Due to the nature of Content Security Policy - Frame Ancestors, you must include all the ancestors of your Twitch embed. This includes any third-party sites your page is included on. You are responsible for providing a method to specify those ancestors for the Twitch embed initialization.

As an example, let’s say your website – mywebsite.com – includes a Twitch embed and you have added one parent query string parameter for mywebsite.com to initialize the embed (in the case of the iframe method). The Twitch embed will display correctly for anyone who visits mywebsite.com, but if your website is embedded on notmywebsite.com, the Twitch embed will not render unless a second parent value is added to Twitch embed initialization.

SSL certificate required

With this new configuration, Twitch embeds can only be embedded on https sites. Non-https sites should plan accordingly if they intend on continued use of any Twitch embed experiences that are currently in operation on their site.

Questions

If you have any questions or comments about this change, please let us know below.


2020/02/12 Update: Clarification added to indicate that a parent value is not required for the domain consuming the JavaScript Twitch embed file when using JavaScript embeds. This domain is included automatically.

5 Likes

Will the update being channel points accrual and extensions to the embedded player?

This update does not add Channel Points accrual or Extensions implementation to the Twitch embedded player.

Couple of questions -

  1. What do you do if you have multiple domains and many subdomains?

For instance
example1.com
example2.com
stream.example4.com
game.example4.com
magic.example4.com

  1. If you embed your stream in Tweets on Twitter is this change going to cause them to stop working?
  2. Right now any newly linked Twitch stream on Reddit, gets Auto embedded, will this change cause that to stop working?
  3. If a random 3rd party, presses the SHARE BUTTON on a Twitch page, grabs the embed code, and puts it on a webpage for instance a gaming news website, will that embed not work anymore due to this change?

Hi there! These are excellent questions. To answer your first question, you would include each listed domain as its own parent key, e.g. parent=example1.com&parent=example2.com…etc. Additional guidance to answer your other questions will be provided in future forum posts with timeline updates.

Do you know if wildcard works? For instance lets say I have dynamically generating subdomains …

Can we use *.example.com to cover all of them?


Also another question that maybe sight off topic, will this update do anything to Twitch’s Dashboard Analytics in terms of “Where Views come from section”?

Right now there appears to be a issue with Analytics from embeds that are on certain domain and subdomains, example would be anything from *.blogspot.com that shows a Twitch Embed doesnt show up. Would this update to the embed player help get this to post up correctly on the analytics side of things?

What does this mean for mobile apps? Obviously they don’t have domains so I’m assuming this does not apply to twitch embedded in a WKWebView for iOS, for example?

@twitter_accounts
Specifying wildcard URLs (e.g. *.example.com) are not accepted for the parent value.

And this update will not affect dashboard analytics. If this is a bug for the team to investigate, please feel free to report it at GitHub.com/TwitchDev/issues/issues.

@player3studios
Please see your other thread here.

How do we assign parent when embedding onto an internal site with no DNS or SSL?

What about situations where I want to embed my own chat in a local html file? I have a local html file that has 4 iframes (1 for Twitch, 3 for racing telemetry I use during iRacing sessions that are also local html files). Now the Twitch iframe won’t load because there is no host domain in this scenario.

Here’s an example (https://github.com/chrisstewart/JRT-Multi-Display/blob/master/JRT-Multi-Display.html). I run this file from my desktop.

localhost and 127.0.0.1/8 are except from the HTTPS restriction and either localhost or the 127 IP range should be used as the parent value for local files.

So as long as your HTML file is served via a webserver and not file:// you can add the parent tag to the iframe and you are good to go

Hello, I’ve embedded my Stream on my Homepage with my Homepage as parent but it doesnt show up. My Homepage is aurelia-online.eu

I have (had?) no need for a web server. 3 of the iframes are localhost, 1 was Twitch. Unfortunate.

HTTPS is required to use the embedd but your website is served via HTTP.

That should work just fine! localhost is a valid parent value and HTTPS is not enforced for local embeds. You can also use local IP addresses like 127.0.0.1 as the parent.

I’m having the same issue. How exactly can I open a local html on my browser with a chat embed? Adding just localhost returns a white frame.

Hey. How to hide topBar? Will the new version of Player Twitch have adaptability? Or will it still work crookedly? If it is not possible to find out all levels of nesting, will the player work?

var parent_domain=[];
try{
if(window.location.ancestorOrigins.length>0){
for(i=0;i<window.location.ancestorOrigins.length;i++){
parent_domain.push(new URL(window.location.ancestorOrigins[i]).hostname);
}
}
loadTwitchEmbed(parent_domain)
}catch(e){
UnsetTwitch();
}

Hello

Since the change, I can no longer integrate Twitch into my Wix site
Could someone help me?

Thanks

2 Likes

Not sure what you are trying to do here? What do you mean by “top bar”

Is your local html on http://localhost or file://file won’t work has to be on a webserver. Even a localhost one

Wix is always a mess. Either use the JS lib to embed your player or add the parentquery parameter as documented