Embed: Requirements for autoplay were not met

API
1

Hi,

Everything was working fine until it didn’t.

I have an iframe with source https://player.twitch.tv/?channel=northernlion&parent=localhost&autoplay=true&muted=false

For example:
<iframe id="video-northernlion" sandbox="allow-scripts allow-same-origin allow-presentation allow-autoplay" referrerpolicy="strict-origin-when-cross-origin" allow="autoplay" src=" https://player.twitch.tv/?channel=northernlion&parent=localhost&autoplay=true&muted=false " style="width: 480px; height: 270px; border: 0px; outline: black solid 10px; visibility: visible;"></iframe>

The player is visible:

image
image488×252 29.2 KB

However I’m getting error:
Autoplay disabled. The following minimum requirements for autoplay were not met: style visibility.

I’m confused because it says to refer to the documentation but there is nothing related to style visibility. All the documentation says is “Minimum size requirements and visibility are necessary for autoplay to begin” which clearly the case here.

2

The iframe shows a height of 270px, the min height is 300px. Have you tried making the Embed bigger so that it’s at least 400x300 and seeing if that resolves the issue?

3

Thanks, I just tried height > 300px and width > 400px with no success and the same error

4

normally I’d ask for a link to debug/test but this seems to be localhost.

So it’s a toss up between twitch blocking it or browsers black box of doom controlling autoplay (and twitch catching/reporting that)

5

here is a link in production: I failed | Voxels Space or here is another link with pure HTML that recreates the setup: Create your own website | W3 Spaces

The error appears even when stream is offline.

This is what the html tree looks like (parent to child iframe):
```
<body style="width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: hidden; position: relative;">

<div>
<div style="overflow: hidden; width: 1243px; height: 911px; perspective: 665.802px;">

<div style="transform-style: preserve-3d; pointer-events: none; width: 1243px; height: 911px; transform: translateZ(665.802px) matrix3d(0.0547689, -0.0379338, 0.997778, 0, 0, -0.999278, -0.0379908, 0, -0.998499, -0.0020807, 0.0547293, 0, 1.16588, -2.9329, 9.26416, 1) translate(621.5px, 455.5px);">

<div style="width: 550px; height: 309px; background-color: rgb(0, 0, 0); position: absolute; pointer-events: auto; transform: translate(-50%, -50%) matrix3d(0, 0, -1.60417, 0, 0, -1.63107, 0, 0, 1, 0, 0, 0, -541.578, 56.7098, 1.41573, 0.001);">

<iframe id="video-squeex" sandbox="allow-scripts allow-same-origin allow-presentation allow-autoplay" referrerpolicy="strict-origin-when-cross-origin" allow="autoplay" src=" Twitch Error " style="width: 550px; height: 309px; border: 0px; outline: black solid 10px; visibility: visible;"></iframe>
…
```

Again, nothing really stopping the twitch player from being visible.

Apart from the 3d tilting, what the HTML does is create a mask that will be used to create a hole in a black div to let the iframe pass through

6

image
image771×510 85.7 KB

Somethings screwy here.

So I suspect the issue here is whatever is going on here… and it’s basically a non standard/supported browser

So as a result of being in 3d space the code doesn’t understand whats going on and errs on the side of caution of whatever it’s doing is getting a false positive

7

I did some testing and here is the reason why this is happening:

Here is a test page: Create your own website | W3 Spaces

Notice how the original matrix3d is “matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1, 0, 1)”

If I change this to matrix3d(1, 0.01, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1, 0, 1) (only one small change 0 → 0.1 ) twitch embed throws an error.

The same applies for transform: translate(-50%,-50%)

I think this is a false positive, is there a way to get this fixed?

8

bump! any thoughts?

9

nothing else to add hence no reply. Bumping has forced the hand of saying no thoughts to add. please don’t bump