¿Hay alguna forma de reproducir un video de youtube cuando pasamos el mouse sobre una imagen? Revisé react-hover-video-player pero no pude reproducir videos de youtube. El video debe reproducirse en el tamaño deseado cuando se pasa el mouse sobre la imagen.
Podrías intentar algo como esto:
YouTube probablemente requiera que esto se cargue desde un servidor, y no solo que se abra como un archivo index.html directamente en la ventana del navegador.
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <img src="https://via.placeholder.com/150" id="image" alt="Placeholder image" /> <div id="youtube"> <iframe title="YouTube video player" frameborder="0" allowfullscreen></iframe> </div> <script> const hoverable = document.querySelector('#image'); function showVideo() { const video = document.querySelector('#youtube iframe'); video.src = 'https://www.youtube.com/embed/LatorN4P9aA'; video.style.width = '560px'; video.style.height = '315px'; video.allow ='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'; hoverable.removeEventListener('mouseover', showVideo); } hoverable.addEventListener('mouseover', showVideo); </script> </body> </html>