Embedding problems

Hi there!

I’m trying to embed a twitch player into my mobile app - but the parent is in the way.
Whenever I try to embed an Interactive Frame, I get the NoParent error. I’m using a web viewer and load the following HTML:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://player.twitch.tv/js/embed/v1.js"></script>
        <title>Twitch Embed Testing</title>
    </head>
    <body>
        <div id="player"></div>
        <script type="text/javascript">
            var options = {
                width: 854,
                height: 480,
                channel: "thqllium",
                parent: ["localhost"]
            };
            var player = new Twitch.Player("player", options);
            player.setVolume(0.5);
        </script>
    </body>
</html>

I’ve not only tried “localhost” as a parent, but the data:// URI and 127.0.0.1, but nothing has worked yet.
Does anyone have a solution for this?

Thanks in advance!

Try Jon’s solution

Yeah I got the iframe working, but I’m using an interactive frame, which means I’ll be using the embed javascript - https://dev.twitch.tv/docs/embed/video-and-clips#interactive-frames-for-live-streams-and-vods

I’d like this to have more control over the embed, so the user isn’t able to get the “follow” popup which will block the entire screen and which will make the app not working anymore.

You can’t control anything inside the iframe. That’s controlled by twitch so every embed has the same experience everywhere.

I know? That’s why I’m using the javascript thing, not the iframe…

The JavaScript embed is still an iframe, it just creates it itself rather than you making the iframe.

Have you even read the docs? You can use player.setMuted(false) and player.setVolume(0.5) and such with the javascript library. I need that for my application, which wouldn’t be possible with the non-interactive embed

Dist/WLG3R are referring to the ability to remove/hide player elements such as the follow button/title.

You cannot do that.

They were not referring to the interactive functions such as setMuted which you can do.

Oh, of course. I meant that if I can get an interactive frame working, I can disable the buttons on the stream it self and make the buttons myself, you know? So they don’t accidentally click on the user title instead of the play button etc.

This is not possible. The embed player (in any form) does not provide this ability.

You cannot interrupt the player controls like this.

And doing so make constitute a violation of the developer agreement.

See also

1. Embeddable Experiences under SCHEDULE 1

  • Do not modify, replace, interfere with, block, cover, or obscure: (a) the functionality of embeddable experiences, including advertisements within the player; or (b) the Twitch Marks.

Would it also violate it if I recreate all the buttons/links, and create a confirmation popup for some?
Because once they click on the “follow” button there will appear a popup from the twitch to log in, and that makes it impossible to get back to the player (due to the phone screen being small)

edit: nevermind, just saw the “replace”

as long as you leave the player controls intact.

Which would mean you’d have two sets of controls on the page.

The ones the player provide and the ones you make.

Also there is no way to “duplicate” the follow functiontionality.

Okay, well thank you very much for your help!

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