Embed API Autoplay DIsabled

API
1

I have a clip embed that’s been working for the last 4ish years and would autoplay. Now I’m getting the following error out of nowhere with no changes on my end:

Twitch Embed Error Message
Autoplay disabled. The following minimum requirements for autoplay were not met: style visibility. Refer to the Embedded Experiences Requirements in the Twitch Developer documentation:https://dev.twitch.tv/docs/embed/

While reviewing the linked documentation, it gives me zero insight as to what “style visibility” actually covers. Can anyone provide any insight?

Thanks

2 Likes
2

Without a link to where your embed is it’s hard to diagnose, but 2 relevant portions of the docs are:

1.3 Embeds must utilize only Twitch-approved player elements and should not be obscured in any way by other page elements in whatever domain context they may appear. Certain features, such as the ability to send chat messages, may be disabled if the iframe is obscured or not visible.

1.4 Embeds must adhere to the minimum height and width requirements outlined in their respective attribute tables.

Have you checked to ensure that your embed is not obscured in any way, and that it meets the minimum height and width requirements?

3

Link to broken page to debug for you might be useful

4

What I found for my page which was running into the same issue and started last week. I had a div which displayed the current clip’s id/date positioned over the iframe (that embeds the clip) in the bottom corner.

I moved the div below the iframe and the error went away.

5

I’m having similar trouble – my app was working last week but seems to have stopped now.

The app is showing 4 twitch streams side-by-side – there is nothing covering any of the windows. I’ve tried (manually, via inspector) removing everything from the DOM except for the twitch players, but no luck.

It only seems to reproduce once I have two rows of content; two side-by-side players works just fine.

Can someone please help me understand what “style visibility” is referring to here, and how to be compliant with twitch’s guidelines?

6

Your site shows no errors saying auto play as been blocked.

So just seems to be the “regular” “browser interaction score” random block stopping auto play going and you can’t fix that

However:


    var options = {
      width: '100%',
      height: '100%',
      video: videoDetails.id,
      autoplay: false,
      muted: true,
    }

Your config is autoplay false

7

Ah, I figured it out. I was testing with chrome 112 – so the error is probably just ‘please get off this old version of chrome’ and not actually related. Latest Firefox works just fine.

8

Actually I have the same error on one of my client project where I can’t share the code link, It worked last year without any trouble on chrome browser, some how after one year, it is no longer working in chrome browser but it is working properly still on firefox

This is the warnings I noticed on chrome console

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <div.modal fade in#mdl-watch>
Ancestor with aria-hidden: <div.modal fade in#mdl-watch> <div id="mdl-watch" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="modalWatch" aria-hidden="true" data-backdrop="static" data-keyboard="false" style="display: block; padding-right: 15px;">…</div>Understand this warning
42363-100ff9b215220cefc93c.js:1
Twitch Embed Error MessageAutoplay disabled. The following minimum requirements for autoplay were not met: style visibility. Refer to the Embedded Experiences Requirements in the Twitch Developer documentation:https://dev.twitch.tv/docs/embed/

This is how the prop values set for interactive video embedding in the project                  player = new Twitch.Player("mdl-w-iframe", {

                    height: '100%',

                    channel: STREAM_CHANNEL,

                    autoplay: false,

                    controls: <?php echo $show_controls ? 'true' : 'false'; ?>,

                    parent: ["<?php echo parse_url(base_url(), PHP_URL_HOST) ?>"]

                  });
9

You specified a height of 100% that makes it the size of the parent element

And you didn’t include that. So we can’t tell you if your width/height matches the Requirements.

Additioanlly you set autoplay to off anyway so autoplay isn’t gonna run. Not sure if your issue is autoplay (as you posted in the autoplay thread) or the embed spinning up at all.

You could link the result instead of the code?

10

Sure, I will check this point you have mentioned about height and will share the latest code with you tonight.

Current result is, on chrome we are able to see the twitch player but unable to play the video even after clicking the play button but it is working perfectly on firefox browser

11

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