0
109
ViewsCómo deshabilitar el evento de clic en el elemento de video en youtube
Actualmente estoy trabajando en una extensión de Chrome para YouTube y quiero deshabilitar la opción para que el usuario pause/reproduzca el video haciendo clic en él.
Vi algunas publicaciones que dicen "video.off('click');" pero no funciona.
Probé este también:
video.addEventListener('click', function(event){ console.log("preventing?") event.preventDefault(); });pero aun así no hace nada.
Me encantaría un poco de ayuda si es posible. ¡Gracias a todos de antemano!
Editar:
Vi los comentarios y quiero afinar mi pregunta. Necesito una solución para deshabilitar solo el evento de clic para detener la reproducción/pausa desde allí.
También necesito que la respuesta se escriba en un archivo javascript porque quiero controlar si el usuario puede hacer clic en el video o no.
También busqué en: Código Javascript para deshabilitar el clic del mouse para videos de YouTube, pero no logré encontrar una solución correcta para mi pregunta específica. Vi una solución que recomienda agregar una superposición transparente en la parte superior del elemento de video, pero no tengo idea de cómo hacerlo y cómo hacer que cambie de tamaño a medida que el reproductor de video cambia de tamaño.
3 answers
Answer question0
Adjunte un oyente de click en la window + use la fase de captura especificando true para el tercer parámetro de addEventListener + use stopPropagation, de modo que su oyente sea el primer objetivo en la cadena de propagación de eventos, es decir, se ejecutará antes que los controladores del sitio porque los sitios generalmente no utilice la fase de captura.
window.addEventListener('click', event => { if (event.target.matches('video')) { event.stopPropagation(); } }, true);Tenga en cuenta que si algún sitio raro usa exactamente el mismo truco, aún puede anularlo declarando su secuencia de comandos de contenido con "run_at": "document_start".
0
Noté que algunos sitios web que muestran videos de YouTube colocan una superposición transparente en la parte superior del reproductor para que los usuarios no puedan hacer clic en el ícono "Abrir en YouTube". Esto también podría ayudarlo, incluso si aún puede enfocar los controles usando el teclado.
0
Puede verificar ambas implementaciones aquí:https://stackblitz.com/edit/web-platform-4oehg4?file=index.html (SO snippet can't ined yt iframe videos)
// HTML <div class="container"> <iframe id="video2" width="100%" height="100%" src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" ></iframe> <div class="overlay"></div> </div> // CSS .container { position: relative; width: 100%; height: 50%; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }Usando solo CSS:
// HTML <iframe width="100%" height="50%" id="video" src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;" ></iframe> // CSS #video { pointer-events: none; }