Parent value string contains an invalid character

I am trying to figure out what the invalid character is, and as I’m not a scripter I don’t quite get this. Im building a site for a friend and between CSS and this Im about ready to lose it.

Site is memestreams.gq.

code

<div id="twitch-embed">

      <!-- Add a placeholder for the Twitch embed -->

      <!-- Load the Twitch embed script -->

      <script src="https://player.twitch.tv/js/embed/v1.js"></script>

      <!-- Create a Twitch.Player object. This will render within the placeholder div -->

      <script type="text/javascript">

        new Twitch.Player("twitch-embed", {

          channel: "meme_games746",

        });

      </script>

It is taken directly from the share button near the stream. Can someone please help me with this?

Having checked the only fault is that you are telling it to embed to a element of id stream which doesn’t exist

so if I take your code that is there and change it to target twitch-stream


                var parent = ['memestreams.ga', 'memestreams.gq', 'www.gstatic.com', 'memestreams.tk', 'window.location.host'];

                var options = {
                    width: 720,
                    height: 1280,
                    channel: "meme_games746",
                    allowfullscreen: true,
                    layout: "video-with-chat",
                    muted: false,
                    parent
                };
                var player = new Twitch.Embed("twitch-stream", options);

It works fine

However you should be using:

        <div id="twitch-stream"></div>
            <script src="https://embed.twitch.tv/embed/v1.js"></script>
            <script type="text/javascript">
                var options = {
                    width: 720,
                    height: 1280,
                    channel: "meme_games746",
                    allowfullscreen: true,
                    layout: "video-with-chat",
                    muted: false
                };
                var player = new Twitch.Embed("twitch-stream", options);
            </script>

As the JS embed script will auto determine the parent to use, and you have no iFrame stack to worry about

Alright thank you for that information. however, It states that the embed is misconfigured. I’m now experiencing an issue attempting to embed an VOD stream. It will refuse to connect, or it will say misconfigured embed. I’m using the script given by the share button.

<!-- Add a placeholder for the Twitch embed -->
<div id="twitch-embed"></div>

<!-- Load the Twitch embed script -->
<script src="https://player.twitch.tv/js/embed/v1.js"></script>

<!-- Create a Twitch.Player object. This will render within the placeholder div -->
<script type="text/javascript">
  new Twitch.Player("twitch-embed", {
    video: "1495975551"
  });
</script>

above is for the VOD Stream.
And the code you provided partially works other than twitch says the embed is misconfigured.

Link to page with the broken embed on please

I am unable to link to it due to a merge conflict. I have the site content itself hosted on github.

Investigating and solving the issue requires looking at the problem inside the environment. So without the “live page” to look at I can’t trace the issue.

The code you presented looks correct. So this suggests some kind of problem with the environment. Likely nested iFrames, but if the code is on Github then that doesn’t seem likely. So I need to check the environment, which I can’t without the page being live

I can link to a folder that has everything in it, if that would be of any assistance.

Ignore this. There was an stray object in the code. Your code seems to be working now.

Is there a chance you’ll be able to help with the VOD issue i’m having?

By ignore this I mean ignore the message above this post.

I’m having a new issue, I cannot get the VOD embed to resize. Do I need to start a new topic for that?

What have you tried?
what isn’t working?

may as well continue here

I am having trouble resizing the VOD embed for past streams on the site. I managed to get it working and centered, but it is far too small. I have tried using the Twitch documentation on the VOD embeds, and also tried browsing the internet (eg. Stack Overflow) for solutions.

Twitch documentation: Embedding Twitch | Twitch Developers

Link to stack overflow post

Here is an image and some of my code.


Uploading: image.png(1)…

HTML is below, CSS is below the HTML.

<body>

    <div id="vidscript">
        <div id="twitch-embed">
            <!-- Load the Twitch embed script -->
            <script src="https://player.twitch.tv/js/embed/v1.js"></script>

            <!-- Create a Twitch.Player object. This will render within the placeholder div -->
            <script type="text/javascript">
                new Twitch.Player("twitch-embed", {
                    video: "1501464684"

                });
            </script>
            </script>
        </div>

    </div>

</body>

</html>
.twitch-embed {
    transform: translateX(10px), translateY(1px);
    transform-origin: safe center;
}

.vidscript {
    height: "100%", width: "100%",
}

div.Twitch.Player {
    width: 130;
    height: 150px;
}

Current HTML is this :

<script src="https://player.twitch.tv/js/embed/v1.js"></script>
    <div id="<laststream>">
        <div id="twitch-embed"></div>

        <!-- Load the Twitch embed script -->
        <script src="https://player.twitch.tv/js/embed/v1.js"></script>

        <!-- Create a Twitch.Player object. This will render within the placeholder div -->
        <script type="text/javascript">
            new Twitch.Player("twitch-embed", {
                video: "1501464684"
            });
        </script>
        var player = new Twitch.Player("
        <laststream>", options); player.setVolume(0.5);
            </script>
    </div>

I’m certain there’s something i’m missing but i’m not sure what it might be.

syntax errors int HTML/CSS/Script aside and a weird choice of div ID

You didn’t specify any sizes in the options params. And made a divits mess

Heres a solution: https://codepen.io/BarryCarlyon/pen/oNEJPQL

Note I set the options width/height to 100% and then use CSS on the twitch-embed div instead

Thanks for letting me know what I did wrong.