Tuve este problema durante casi 1 semana sin que funcionara ninguna solución. Tengo una etiqueta iframe de uso de ReactApp para reproducir videos de YouTube. La solicitud es hacer clic en otra etiqueta (como una miniatura), luego se reproducirá el video en lugar de hacer clic directamente en iframe.

La miniatura tiene índice z = 2; iframe z-index = 1. Al hacer clic en la miniatura, la miniatura se ocultará (display=none).

Puedo hacer esto agregando '?autoplay=1&mute=1' a la url incrustada de youtube al hacer clic en la miniatura. Esto funciona bien en el escritorio. PERO Debido a que YouTube no permite la reproducción automática en dispositivos móviles/tabletas, el usuario debe hacer clic dos veces para que se reproduzca el video, primero haga clic en la miniatura, luego haga clic en iframe.

¿Hay alguna manera de que el usuario solo pueda hacer clic una vez en la miniatura y luego el video se reproducirá automáticamente?

Mi sitio web tiene un dominio diferente con youtube, por lo que no se permite ninguna forma de acceso al elemento dentro del iframe.

Esta tarea debe completarse solo con javascript/mecanografiado estándar. No preferimos usar un reproductor de reacción de terceros porque este reproductor afectará el rendimiento de la aplicación.

A continuación se muestran códigos similares al proyecto real. Agradecería cualquier consejo ya que estoy realmente agotado con esto :)))

 <div id="container"> <div id="thumbnail"></div> <iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg?autoplay=1&mute=1" title="Dummy Video For YouTube API Test" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>