I’m working on an extension that embeds and plays a clip in an Overlay component. Due to the Extension policies,
<iframe> is not an allowed tag (which would be the easiest option).
Another option I have been using is the
<embed> tag to render the the embedded clip. This has been working great while testing locally and has the added benefit that the it uses the Twitch video playback tools.
Once moving the files to “Hosted Test”, I am encountering a new error that is preventing the embedded clip from loading. I get an error such as the below:
Refused to load plugin data from 'https://clips.twitch.tv/embed?clip=IntelligentCoweringTurnipKappaRoss-HjocSONAC5UOBWVh&parent=supervisor.ext-twitch.tv&parent=www.supervisor.ext-twitch.tv&parent=twitch.tv&parent=www.twitch.tv&autoplay=true&muted=true' because it violates the following Content Security Policy directive: "default-src 'self' https://aiyioobmwvfvxojatv7bl5qsmbfxng.ext-twitch.tv". Note that 'object-src' was not explicitly set, so 'default-src' is used as a fallback. https://dev.twitch.tv/docs/extensions/#restrictions-on-content
I find it odd that I was not getting these errors while locally testing, though maybe that’s just a limitation of locally testing extensions. It looks like this is due to the Content Security Policy’s that are set on the extensions. Is there anyway to still make this work using the tag or is it a no go due to the CSP? It would be great if I was able to find a way to make this work.
Alternatively it seems that I can use a
<video> tag component and this should work and passes the extension policies. Only downside to this is that it does not use the Twitch video playback tools and just uses the native browser playback. In addition, it’s a bit more hacky to get the src url to pass to this component since you need to use the url containing .mp4.
It seems this can be done by calling the GetClips endpoint and passing the clip id.
As part of the response there will be a
With this thumbnailUrl, I should be able to transform it to
https://clips-media-assets2.twitch.tv/39681497019-offset-4790.mp4. And this url will correctly play the clip. This method seems a bit more hacky tho and I’m not sure this is a good approach to use.
I’m curious if anyone has any ideas / suggestions on the above points. Ideally I’d like to make the
<embed> tag work if possible. If thats not possible, does the
<video> tag seem like the right approach to use?