Traté de cargar videos de YouTube en 3 pestañas en una página. En la carga inicial del componente de reacción, el video debajo de la primera página funciona bien. Si navegó a la segunda o tercera pestaña, el reproductor de youtube no se está montando en el DOM. Lo que entendí de este comportamiento durante el cambio de pestaña es que el evento 'onYouTubeIframeAPIReady' no se activa desde el script descargado después de cambiar las pestañas. Me aseguré de que en cada cambio de pestaña se represente el componente y se descargue un nuevo script de la API de iFrame.
import { Component } from 'react'; class VideoPlayer extends Component { componentDidMount() { const id = 'youtube-id'; if (!document.getElementById(id)) { const tag = document.createElement('script'); tag.setAttribute('src', 'https://www.youtube.com/iframe_api'); tag.setAttribute('id', id); document.body.appendChild(tag); window.youtubeFrames = []; window.onYouTubeIframeAPIReady = this.loadYoutubeVideo; } window.youtubeFrames.push({ video: this.video, videoId: this.props.Id, }); } componentWillUnmount() { const elem = document.getElementById('youtube-id'); if (elem) { elem.parentNode.removeChild(elem); } } loadYoutubeVideo = () => { let player; window.youtubeFrames.forEach((youtubeFrame) => { if (youtubeFrame.video) { player = new YT.Player(youtubeFrame.video, { height: `${this.video.style.height}px`, width: '100%', videoId: youtubeFrame.videoId, playerVars: { rel: 0, }, events: { onStateChange: (e) => { if (e.data === 0) { youtubeFrame.coverFrame.classList.remove('play'); } else { youtubeFrame.coverFrame.classList.add('play'); } }, }, }); } }); /* eslint-enable */ } render() { const videoRef = arg => (this.video = arg); return ( < div className = "youtube-video" ref = { coverRef } > < div className = "video" ref = { videoRef } /> < / div > ); }; } export default VideoPlayer;