Как захватить событие API iframe YouTube в React

Question

Я использую iframe для импорта URL-адреса вставки YouTube

<iframe
          id="ytVideo"
          src={embed_url}
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture;"
 ></iframe>

И затем я хочу прослушать событие, когда видео на YouTube onPlay и onPause

для этого я установил window.addEventListener наиспользуйтеEffect для получения события iframe postMessage onStateChange event

useEffect(() => {
    window.addEventListener("message", event => {
      console.log("event", event.data);
    });
    return () => {};
  }, []);

Но при воспроизведении видео на YouTube не происходит никакого захвата.

Answer 1

Именно так Google рекомендует вам настроить это. Это включает в себя настройку объекта YT.Player.

https://developers.google.com/youtube/iframe_api_reference