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:
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
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:
Again– read the documentation closer and realize that if you don’t include the base url of wheverever you’re hosting from, such as
www.davidwesst.com in my case, the Twitch player is going to refuse the connection.
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:
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).
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.