Search code examples
javascripthtmliframetwitchtwitch-api

Twitch Embedded Clips Error - Refusing to connect

I am trying to embed twitch clips and videos on a site and it feels like I'm hitting my head against a wall here.

I have an articles division holding an embedded twitch clip. On both my ftp site and localhost, the embedded clip doesn't work. I can only assume I am doing something wrong with my parent but I have tried almost everything. I get this twitch connect error - I have followed the twitch API but not coming right.

enter image description here

Not sure if it makes a difference but the html file is located in the directory - abcstreamer.co.za/commingsoon/streamclips.html

This is my local hosted code:

<article class="stream stream-1 has-post-thumbnail">
                        <iframe 
                            src="https://clips.twitch.tv/embed?clip=EphemeralPlainSaladPipeHype-24G9rCNWcx09Wc42&parent=localhost:5500" 
                            allowfullscreen="true", 
                            autoplay=false,
                            height="100%" 
                            width="100%">
                        </iframe>
                </article>

Below is my ftp site code:

<iframe 
                            src="https://clips.twitch.tv/embed?clip=EphemeralPlainSaladPipeHype-24G9rCNWcx09Wc42&parent=abcstreamer.co.za" 
                            allowfullscreen="true" 
                            autoplay="false",
                            height="100%" 
                            width="100%">
                        </iframe>

Could someone who has maybe worked with the twitch API call assist in correcting a mistake I cant seem to see.

Solution

  • abcstreamer.co.za doesn't exist so I can't debug for you

    Twitch Embeds require the site to be over SSL.

    And you may need multiple parent if your embed is in an iframe on your site. Site builder Tools such as wix will put the embed in and iframe on the site so you need two or more parent's declared.

    So you might need

    https://clips.twitch.tv/embed?clip=EphemeralPlainSaladPipeHype-24G9rCNWcx09Wc42&parent=abcstreamer.co.za&parent=www.abcstreamer.co.za

    To account for www. if you don't redirect www. to non www. or vice versa. The same applies for redirecting non SSL users to the SSL version

    or

    https://clips.twitch.tv/embed?clip=EphemeralPlainSaladPipeHype-24G9rCNWcx09Wc42&parent=abcstreamer.co.za&parent=www.abcstreamer.co.za&parent=someotherdomain.com

    If someotherdomain.com handles the iframe on the site builder if any

    The "mega thread" has further advice on determining your parent stack https://discuss.dev.twitch.tv/t/the-great-big-im-using-wix-somewebsitemaking-tool-and-i-dont-know-how-to-fix-my-embed-thread/26297/