I'm trying to fire a function when my player is clicked, but it's not working

This is my player:

<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>

What I'm trying to do just for testing:

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

If I click on the video it doesn't work, but if I click on the progress or on the div area before the player loads, the function just works. I thought it would be because my progress bar is inside the video player's div , but even if I put it outside the behavior keep the same.