Twitch iFrame UI is unusable on mobile

API
1

Not sure if this is just the way the player lays itself out, or if something in my code is causing the UI to be extremely small but only on mobile. Since the change to embeds back in 2020 the suggested way to embed in an iOS app was laid out here by @jbulava.

I haven’t seen any updates as far as plans for embedding in mobile apps, and I’m trying to follow the user guidelines and not manipulate the html on the iOS side by injecting scripts, but the UI just isn’t usable. Again, this is assuming its not my code (which it could be).

Here is the code I’m using to do this:

<!doctype html>

<html lang="en" style="background-color: #FFFFFF">
  <style>
    #twitch-embed {
      height: 0;
      position: relative;
      overflow: hidden;
      padding: 0 0 56.25%;
      width: 100%;
      border-radius: 0px;
    }

    #twitch-embed iframe {
      position: absolute;
      height: 100%;
      width: 100%;
    }
  </style>

  <head>
    <meta charset="utf-8">
  </head>

  <div id="twitch-embed">
    <iframe src="https://player.twitch.tv/?channel=esl_csgo&parent=examplewebsite.com" frameborder="0" allowfullscreen="true" scrolling="no" height="100VH" width="100VM"></iframe>
  </div>

</html>

and here is the result:

image
image1290×2796 91.5 KB

If it is my code, then I would just like to know what I am doing wrong. If it is Twitch, then maybe we as a community can assist with a solution for iOS and Android app embeds? I’m more than willing to create an iOS SDK to handle embeds, if Twitch doesn’t want to allocate the time/resources to it.

One possible solution is to allow us to pass a parameter (like mobile=true) to specify that it will be dislayed on mobile. This will allow the player to lay itself out in a more “mobile-friendly” way.

The alternative is if they just turn a blind eye and let us mobile devs manipulate the html of the embed, but I doubt they would want that.

2

Also worth noting that there are several drawbacks to using @jbulava 's approach. One being that we can’t have the stream start unmuted (at least as far as I’ve seen).

3

This problem exists on all platforms due to browser interaction score.

You can ask for unmuted, but it’s a toss up if the browser will honour it.

Since Twitch doesn’t offer “native embeds” then you need a uservoice to request the mobile player be optimised for mobile usage or for mobile to have something better.

Since even the Twitch main website player is “bad” in desktop mode on mobile, if you defeat the app redirect.

Alternatively you can utilised the JS API to add your own controls seperate to the player instead

UserVoice feature request this is

4

Hey @BarryCarlyon , thanks for the reply. I see you constantly on these threads and appreciate it.

A couple of things:

1: In regards to this:

This problem exists on all platforms due to browser interaction score.

I guess I should have been more clear here. I know that its the browser that causes this and that its out of Twitch’s hands. I guess my point was more that if we had a native solution then that wouldn’t be an issue.

2: I wasn’t familiar with UserVoice until you suggested it. I will definitely create an idea for both a native SDK and a mobile parameter. Is UserVoice an actually useful way to get things implemented? Or does it tend to be a blackhole of ideas? I’m speaking just based off of my experience of Apple’s version of UserVoice, which gets heavily ignored.

5

Yup!

People like to believe it is, but that is where ideas go, posting them here won’t get it in front of the people that need to see it.

6

I created a UserVoice suggestion. I hope that it gets some attention as I think a lot of people would benefit as a result (most importantly users).

In the mean time, I guess I’d like to know if @jbulava has an update on what the roadmap is for embeds, if there is one? Is there an embeds team? I guess I’d just like to know if I should even bother creating some of these Twitch features in my iOS app or if the embeds are doomed forever haha.

7

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.

Screenshot 2023-02-11 at 3.39.36 PM
Screenshot 2023-02-11 at 3.39.36 PM706×392 243 KB

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.

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.