Embed video autoplay is not honored

API
1

Hi all,

I was trying to create a twich embedded iframe using JS. Here is my code:

const options = {
  width: '100%',
  height: '100%',
  channel: 'some-channel-id',
  layout: 'video',
  autoplay: false
};

const twitchPlayer = new Twitch.Embed(this.get('videoPlayerId'), options);

However, the embed video plays immediately even though I set the autoplay: false. Looking at the iframe, I didn’t see the autoplay option being part of the iframe url query parameter -

<iframe src="https://embed.twitch.tv?channel=some-channel-id&layout=video&referrer=some-referer-url" allowfullscreen="" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>lowfullscreen="" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>

Could someone help? Thank you very much in advanced!

Best,
Sugi

2

autoplay=false

on the iframe ?

3

Hi Matt. I didn’t construct the iframe manually but create it via this const twitchPlayer = new Twitch.Embed(this.get('videoPlayerId'), options); Inside the options object, I add autoplay: false per the tutorial.

4

Is the tutorial you are reading for clips or videos only, regarding the autoplay=false?

5

Here is the tutorial that I read



    <!-- 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: 854,
        height: 480,
        channel: "monstercat",
        layout: "video",
        autoplay: false
      });

      embed.addEventListener(Twitch.Embed.VIDEO_READY, () => {
        var player = embed.getPlayer();
        player.play();
      });
    </script>
  </body>
</html>
6

You want the “Interactive Frames for Live Streams and VODs” bit, not that one.

It uses ‘Player’ not ‘Embed’

<html>
  <body>
<script src= "http://player.twitch.tv/js/embed/v1.js"></script>
<div id="player"></div>
<script type="text/javascript">
  var options = {
    width: 1280,
    height: 720,
    channel: "monstercat",
    autoplay: false,
  };
  var player = new Twitch.Player("player", options);
  player.setVolume(0.5);
</script>
  </body>
</html>
1 Like
7

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