Works fine as an embed on it’s own but when shared via Twitter or run through Twitter’s validator it’s broken and gives the following error instead of showing video playback:
Whoops this embed is misconfigured. (Developers: Please check your browser console for more information)
Console does show errors on my page when a stream is live however they seem to be from Twitch itself. See my paste at the end of this post. Domains in question were:
[Error] Failed to load resource: Could not connect to the server. (P34D56F9D-5684-4C83-8EE1-5EA7DE9CF45D.js, line 0)
[Error] Failed to load resource: Could not connect to the server. (iui3, line 0)
[Error] Failed to load resource: Could not connect to the server. (b, line 0)
[Error] Failed to load resource: Could not connect to the server. (iu3, line 0)
[Warning] Moving to buffered region – 0.033 – 0 (player-core-base-83341606b3ec3a4af9ae.js, line 1)
[Error] Failed to load resource: Could not connect to the server. (p, line 0)
[Error] Failed to load resource: Could not connect to the server. (p, line 0)
[Error] Failed to load resource: Could not connect to the server. (p, line 0)
[Error] Failed to load resource: Could not connect to the server. (p, line 0)
So I’m guessing you are missing the cards-frame.twitter.com also note that my domain isn’t in the list at all. Just Twitter ones, since Twitter takes the passed player meta tag and embeds that into Twitter site. It just uses your site to get the meta tags.
So you have no parents at all, being passed to the embed that Twitter renders into Twitter.
The page/link (in theory) doesn’t need an Iframe/the stream on it at all, since Twitter looks for the meta tag. So if you do have an iFrame on there you just need the parents for your site, not Twitter’s as well
I have added cards-frame.twitter.com as a parent to my page’s javascript and it had no effect.
This is the javascript from my page
<script type="text/javascript">
var options = {
channel: "hihellorachel",
width: 1024, //'100%'
height: 385, //385
theme: "dark", //dark
autoplay: "true",
// Only needed if this page is going to be embedded on other websites
parent: ["hihellorachel.tv", "www.hihellorachel.tv", "twitter.com", "cards-dev.twitter.com", "cards-frame.twitter.com"]
};
var player = new Twitch.Player("#twitch-embed", options);
player.setVolume(0.5);
</script>
</body>
</html>
The Twitter card cannot handle/display a JS embed.
A JS embed only works when the viewer loads the page.
A Twitter card useds the <meta name="twitter:player tag to determine what to show in the “preview”/validator/twitter embed.
You need to fix <meta name="twitter:player" content="https://player.twitch.tv/?channel=hihellorachel&html5&muted=true&quality=mobile" /> not add Javascript to the page.
