react-player viewport play not working mobile

Question

I've created this component, it's a simple player that should be playing while user is on viewport and stop playing when leave it.

Everything works fine on browser, but in mobile it's not playing until i touch manually. After that it's taking waypoint behavior.

import { memo, useState } from 'react';
import ReactPlayer from 'react-player/lazy';
import { Waypoint } from 'react-waypoint';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const VideoPlayer = memo(() => {
  const [playing, setPlaying] = useState(false);

  const handleEnterViewport = function () {
    setPlaying(true);
  };
  const handleExitViewport = function () {
    setPlaying(false);
  };

  return (
    <Waypoint onEnter={handleEnterViewport} onLeave={handleExitViewport}>
      <div className='relative mt-10 pt-[56.25%] transition-opacity'>
        <ReactPlayer
          style={{
            position: 'absolute',
            top: '0',
            left: '0',
          }}
          url='https://www.youtube.com/watch?v=1g7TrcIlpMk&ab_channel=OliverAstrologo'
          width='100%'
          height='100%'
          playing={playing}
          playsInline={true}
          muted={true}
          fallback={<p>Loading</p>}
          config={{
            youtube: {
              playerVars: { origin: 'https://www.youtube.com' },
            },
          }}
          on
        />
      </div>
    </Waypoint>
  );
});

export default VideoPlayer;

This is the URL: https://nextjs-videogallery.vercel.app/ This is the repo: https://github.com/valenciaHQ/nextjs-videogallery

Any clues? I've tried using/not using muted prop, playing with/without state, checking mouting stuff and so.

Thank you!

Answer 1

adding scrollableAncestor='window' on Waypoint solved this.