Interesting issue!
This sounds like a common problem with YouTube Iframe API and React. Here are some potential solutions:
1. Ensure YouTube API script is loaded only once
Wrap the script loading in a useEffect hook with an empty dependency array to ensure it's loaded only once:
jsx
useEffect(() => {
const script = document.createElement('script');
script.src = '(link unavailable)';
document.body.appendChild(script);
}, []);
2. Use a ref to store the player instance
Create a ref to store the YouTube player instance and reuse it:
jsx
const playerRef = useRef(null);
useEffect(() => {
if (!playerRef.current) {
playerRef.current = new window.YT.Player('player', {
// your player options
});
}
}, []);
3. Check for YouTube API readiness
Verify the YouTube API is ready before rendering the player:
jsx
useEffect(() => {
window.onYouTubeIframeAPIReady = () => {
// render the player or update the player instance
};
}, []);
4. Unmount and remount the player
Try unmounting and remounting the player when switching components:
jsx
useEffect(() => {
return () => {
if (playerRef.current) {
playerRef.current.destroy();
}
};
}, []);
5. Use a library like react-youtube
Consider using a library like react-youtube that handles the YouTube API integration for you.
Full example
jsx
import React, { useEffect, useRef } from 'react';
declare global {
interface Window {
onYouTubeIframeAPIReady: () => void;
YT: any;
}
}
const YouTubePlayer = () => {
const playerRef = useRef(null);
useEffect(() => {
const script = document.createElement('script');
script.src = '(link unavailable)';
document.body.appendChild(script);
window.onYouTubeIframeAPIReady = () => {
if (!playerRef.current) {
playerRef.current = new window.YT.Player('player', {
// your player options
});
}
};
return () => {
if (playerRef.current) {
playerRef.current.destroy();
}
};
}, []);
return (
<div>
<div id="player" />
</div>
);
};
If none of these solutions work, please provide more details:
I'll help you troubleshoot further!