Embed Twitch Video on Github Pages Hosted Site

Question

I've built a website for an e-sports team using React. One of the pages embeds twitch videos. I used the documentation and was able to get the embedded videos to work on localhost. In the beginning I struggled with it, but then I found out that I need to add the "parent" website url in the embed, as per the docs:

<iframe
    src="https://player.twitch.tv/?<channel, video, or collection>&parent=streamernews.example.com" // <-- this here
    height="<height>"
    width="<width>"
    allowfullscreen="<allowfullscreen>">
</iframe>

But now that I deployed it on github pages to demo it to the team, I'm getting an error.

"Whoops. This embed is misconfigured.

(Developers: Please check your browser console for more information)"

I'm using react-router with Hash routing so that react router works with GH pages.

This is the offending code:

<iframe class="media_display" title="videoPlayer2" src={"https://player.twitch.tv/?channel=" + twitchStreamers[currentStreamer] + "&parent=merryface.github.io/niwi-website/"} frameborder="0" allowfullscreen="true" />

I have a suspicion that I have an issue with the parent attribute, since this worked perfectly fine before deploying it on GH pages, but after a lot of experimentation, I'm a bit at a loss. could someone please help?

Relevant twitch docs: https://dev.twitch.tv/docs/embed/video-and-clips/

Website Page with error: https://merryface.github.io/niwi-website/#/videos

Answer 1

Turns out Hash Router for react-router + trying going back to the basic url of the repo's website sorted the issue