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.

4 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?