Estoy tratando de activar una función cuando se hace clic en mi reproductor, pero no funciona

Este es mi jugador:

 <div class="vadoo_player" vid="s89dafj89asdfu8duf" etype="responsive" > <script src="https://api.vadoo.tv/static/vadoo_player.min.js" id="player_script" vid="s89dafj89asdfu8duf" ></script> <!-- Progress Bar --> <div class="progress"> <div class="progress-bar"></div> </div>

Lo que estoy tratando de hacer solo para probar :

 document.querySelector(".vadoo_player").addEventListener("click", () => { let progressBar = document.querySelector(".progress-bar"); progressBar.style.width = "50%"; });

Si hago clic en el video, no funciona, pero si hago clic en el progreso o en el área div antes de que se cargue el reproductor, la función simplemente funciona. Pensé que sería porque mi barra de progreso está dentro del div del reproductor de video, pero incluso si la coloco fuera, el comportamiento sigue siendo el mismo.