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.