you need to double click while using this on mobile

[AyushJain-18]

trafficstars

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[ahmadelgamal]

The problem is that when I click on a link on a mobile device (Android and iOS) the first click does not open the YouTube video. However, if I click a second time it does, as long as I don't click on another video before the second consecutive click on the first.

[jonathanpauluze]

This is not a problem from the package, youtube autoplay controls doesn't work on Android and iOS devices (maybe because of mobile data).

I would suggest to create a prop to detect when the element is appearing on the screen and switch the image to the youtube player.

[FunctionDJ]

Maybe with #61 it could be possible to start the video through JS from inside the iframe?

[olaf89]

I have the same problem, do you have any workarounds?

[andreisucman]

A workaround is to use intersection observer that would automatically click the play button once the facade is in view. Therefore the user will see the actual iframe by the time he scrolls to the video and will only have to click it once. Here is how to do it with react.

useEffect(() => {
    const button = document.querySelector(".lty-playbtn");
    
    if (!button) return;

    function createObserver() {
      let observer;

      let options = {
        rootMargin: "-50%",
        threshold: 1,
      };

      observer = new IntersectionObserver(() => button.click(), options);
      observer.observe(button);
    }
    return createObserver();
  }, []);

[ahmedmusawir]

THANK YOU andreisucman ... you are a true scholar ... your solution worked like a charm ... I just had to loop thru multiple buttons that's all. Thanx again!