David Wesst

The First Problem

After following along with the Twitch developer documentation about embedding the non-interactive inline frames I hit the following error:

Failed to load resource: the server responded with a status of 403 ()

Which looked something like this:

First Solution

This one was on me, and I didn't read the documentation correctly. Turns out I formatted the query string wrong in the src property and solved it by add ?video=<the-id-goes-here>.

Which bring us to...

The Second Problem

Although the other issue is solved, we now see this "player refuses to connect" error message that looks like this:

This happened both in local development environment and my published post on davidwesst.com. Opening up the browser console gave me a bit of a clue though. It read:

Refused to frame 'https://player.twitch.tv/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.davidwesst.com".

Again-- read the documentation closer and realize that if you don't include the base url of wheverever you're hosting from, such as localhost or 127.0.0.1 or www.davidwesst.com in my case, the Twitch player is going to refuse the connection.

Second Solution

All I ended up doing was adding some parent values to my query string on the src property and TA-DA! it worked. My iframe embed look like this now:

<iframe
    src="https://player.twitch.tv/?video=1241089585&parent=127.0.0.1&parent=www.davidwesst.com"
    height="360"
    width="640"
    allowfullscreen="true">
</iframe>

A Better Solution

Although this works, I don't like that I have to put all my development URLs in the query string to get this working in development and in production. I could do something around changing the strings on build (depending on where it's hosted) but I need to digest it a bit more to decide the best option.

I've created an issue on GitHub and if you have ideas or thoughts, I'd love to hear them in the issue (or the comments of this post).

Lessons Learned

First, read the developer documentation thuroughly.

Second, although this isn't the prettiest solution, it delivers value immediately and unblocks my content creator role (i.e. writing blog posts). It's important to remember to assess an issue and sometimes you need to use some duct tape to keep things moving while you wait for the "best fix" to be ready.

Thanks for playing.

~ DW