¿Por qué no funcionaría esto? Estoy tratando de hacer que cuando haga clic en el video / div en el que se encuentra el video iframe, detenga el control deslizante automático, pero simplemente no puedo hacer que funcione.

JavaScript:

 let slideIndex = 0; showSlides(); let click = 0; function clicked() { var button = document.document.getElementsByClassName('slideshow-container'); button.addEventListener('slideshow-container', function handleClick() { if (click = 1) { click = 0; } else { click = 1; } }); return click; } function showSlides() { let i; let slides = document.getElementsByClassName("slides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; if (click != 1) { setTimeout(showSlides, 6666); } }

HTML:

 <Center> <div class="slideshow-container"> <div class="slides fade"> <div class="numbertext">1 / 3</div> <iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> <div class="slides fade"> <div class="numbertext">2 / 3</div> <iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> <div class="slides fade"> <div class="numbertext">3 / 3</div> <iframe width="1000" height="500" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> </div> </div> </br> <div> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> </Center> </div> <br> <script src="showSlides.js"></script>

Editar: según lo solicitado, cambié las capturas de pantalla por el código real y pasé unos 5 minutos tratando de averiguar cómo publicarlo y ahora necesito más detalles, pero no sé qué agregar, así que estoy escribiendo esto.