Twitch iFrame UI is unusable on mobile

Wanted to add something here. I’m able to remove components from the player by injecting a js script into my WKWebView. It looks good and it solves a number of issues:

  1. The settings button on the embed is for desktop, and has irrelevant settings. Also, the quality is always set on auto anyways.

  2. The twitch logo button in the embed doesn’t actually link to twitch when embedded via WKWebView on iOS, its completely broken so it is also removed.

  3. The title area has most of its stuff removed because it fails to lay out in a way that actually fits.

  4. The streamers image is way too small to really see what it is.

This is obviously against the developer agreement, but I thought it might be helpful in addressing the issue that a simple mobile=true parameter can use the same script that I have to remove these elements that don’t work on mobile.

Then I can then include those elements natively by creating my own view to display the title, viewer count from the API, streamer name and image, follow/sub buttons, etc. I have no problem with twitch requiring this functionality in their embed, I just have a problem with it not working.

This makes for a very interesting idea with the best of both worlds. We can create a very simple iOS SDK that does a few things:

  1. Provide it a URL for your embed on your website (like what I did in my post initially)
  2. Provide it a channel or clip
  3. It can return a view with the embedded stream in a webview, but with the problematic elements removed. And then it can provide a native view to display the removed functionality properly.

This is essentially how some native ads work. You give it something to load a video ad into, and it gives you back the information to display alongside it (like a CTA button, advertiser name, etc).

I would love to build a maintain a community repo on the iOS side, if that were ever allowed.