Search code examples
javascripthtmlembeddingtwitchautoplay

Can't disable autoplay in javascript in an embedded Twitch element. How do I fix this?

This is the code I'm running right now:

<!doctype html>

<html lang="DE">
<head>
<meta charset="utf-8">

<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="xPlayzTV">

</head>

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

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

<!--
  Create a Twitch.Embed object that will render
  within the "twitch-embed" root element.
-->
<script type="text/javascript">
  var embed = new Twitch.Embed("twitch-embed", {
    width: "480",
    height: "270",
theme: "dark",
    channel: "onyxtao",
    layout: "video",
    autoplay: "false",
muted: "true",
    // only needed if your site is also embedded on embed.example.com and othersite.example.com 
    parent: ["www.onyx-warframe.com"]
  });

  embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
    var player = embed.getPlayer();
    player.play();
  });

As you can see I have a line saying that autoplay is set to false. Despite being a listed boolean on Twitch's embedding guide, it doesn't seem to work. I've also tried replacing it with 0, and completely removing the autoplay row, but neither worked. Does anyone have other solutions to this, ideally with an explanation so I know what the problem is?

Solution

  • You cast your variables as strings instead of booleans or integers leading to unexpected behaviour

          var embed = new Twitch.Embed("twitch-embed", {
        width: "480",
        height: "270",
        theme: "dark",
        channel: "onyxtao",
        layout: "video",
        autoplay: "false",
        muted: "true",
        // only needed if your site is also embedded on embed.example.com and othersite.example.com 
        parent: ["www.onyx-warframe.com"]
      });

    Should be

          var embed = new Twitch.Embed("twitch-embed", {
        width: 480,
        height: 270,
        theme: "dark",
        channel: "onyxtao",
        layout: "video",
        autoplay: false,
        muted: true,
        parent: ["www.onyx-warframe.com"]
      });

    So your "false" as treated as a "truthy"

    Edit:

    You also need to remove

          embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
        var player = embed.getPlayer();
        player.play();
      });

    As this will trigger the play function when the player has finished loading