vimeo Player only binds event the first time

Question

I have a page that has a reserved iframe for the player at the start, and below i have a list of videos.

when you click in one of the videos it gets loaded onto the "player" at the top with a js function, the same function creates the vimeo.Player object and then binds an on(timeupdate) that procs an ajax when the video hits a percentage of 90%.

the problem: the first time you select a video everything works the way it should, but when u select another it either doesn't add the listener or doesnt create the Player.

order goes like this: function aux -> ver() -mostly display stuff and src update on iframe id -> creates new Vimeo.Player at the end

 function aux(element) {

        var player = ver(element),
            cod = element.id;
    
        console.log('code: ' + cod);
        player.on('timeupdate', function(data) {
            console.log('upd');
            if (data.percent > 0.9) {
                console.log('90');
                $.ajax({
                    type: "POST",
                    url: "ajax.markvideo.php",
                    data: {
                        code: cod,
                        email: <?php echo '"' . $_SESSION['email'] . '"' ?>
                    }
                }).done(function(msg) {
                    player.off('timeupdate');
                });
            }
        });
    }

i've tried to empty the iframe by textcontent or child removing because that seems to be the only thing that changes, but neither of them did anything.

Answer 1

using the api loadVideo() instead of changing the iframe src directly did the job.