Autoplay on iOS Safari not working

[leilahbirchall]

Hi 😄 I don't seem to be able to get autoplay to work on iOS Safari (muted has been applied). All other browsers seem fine, so I'm not sure what I'm missing. I'm using a React and Gatsby set up, loading the script into Gatsby Head of required pages like the below:

export const Head = ({ data, location }) => {
    const { title } = data.project;

    return (
        <>
            <SEO title={title} pathname={location.pathname} />
            <script
                type="module"
                src="https://cdn.jsdelivr.net/npm/playerx/+esm"
            ></script>
        </>
    );
};

Then I've created a component that loads Vimeo and YouTube videos, using the player-x html web component:

<player-x
    src={video}
    loading={loading}
    autoplay=""
    muted=""
    {...{
        ...(controls && { controls: '' }),
        ...(loop && { loop: '' }),
    }}>
</player-x>

I've attempted setting the autoplay and muted props as a true boolean, but this didn't make a difference.

There does appear to be some 401 errors in the console, but I don't believe there's an issue with the URL in the script and I've cleared my browser cache which hasn't helped.

Any advice on what might be going wrong here?

[luwes]

hey, do you have codesandbox online that I could help debug? that would make it easier. thanks

can you confirm the attributes are set in the DOM in the web inspector elements tab?

[leilahbirchall]

hey, do you have codesandbox online that I could help debug? that would make it easier. thanks

can you confirm the attributes are set in the DOM in the web inspector elements tab?

Thanks for getting back to me! Sure yeah I've created a simplified version of the component I've made here using Gatsby and React: https://codesandbox.io/p/devbox/vimeo-4dq6t3

However it doesn't look like it's a Gatsby related issue as I've also created another Sandbox with just React here and can still see the issue: https://codesandbox.io/p/sandbox/eager-babbage-qhsjx8

Can confirm the attributes are being set in the DOM which you should see in the Sandboxes 🙂 Both URLs tested with iOS V17.1.2.

[luwes]

thanks, the fix is to add a playsinline attribute
https://codesandbox.io/p/devbox/vimeo-forked-5r93cw?file=%2Fsrc%2Fcomponents%2Fvimeo.js

the default on iOS and Vimeo player is to go to fullscreen on play but this requires a user gesture so it blocks playing.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#playsinline