После изменения исходного кода JavaScript функции iframe не работают

Question

У меня есть iframe для воспроизведения видео vimeo.

<iframe src="@Url.Content("https://player.vimeo.com/video/"+Model.VideoUrl.Split(';')[0])" id="vimeoIframe" class="video-js vjs-default-skin" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

Я меняю источник iframe с помощью этой функции

function ChangeVideoPart(videoId) {
   var $iframe = $('#vimeoIframe');
   var $iframe_html5_api = $('#vimeoIframe_html5_api');
   if ( $iframe.length && $iframe_html5_api.length) {
       $iframe.attr('src', 'https://player.vimeo.com/video/' + videoId);   
       $iframe_html5_api.attr('src', 'https://player.vimeo.com/video/' + videoId);  
       return false;
   }    
   return true;
}

После смены iframe src видео меняется без проблем. Но также у меня есть некоторые функции для организации воспроизведения видео, паузы, завершения событий. Как и

 $(document).ready(function () {
    var startTime = new Date();
    var videoPlaying = false;
    var videoStartTime;
    var videoWatchedTime = 0;
    if ($('#vimeoIframe').length != 0) {
        var iframe = document.querySelector('iframe');
        var player = new Vimeo.Player(iframe);
        if ($('#vimeoIframe').length != 0) {
            var myPlayer = videojs('#vimeoIframe');
            $('#vimeoIframe').on('click', function () {
                if (!myPlayer.paused()) {
                    videpPlaying= true;
                    videoStartTime = new Date();
                    console.log('video playing!');
                } else if (myPlayer.ended()) {
                    videpPlaying= false;
                    var endTime = new Date();
                    videoWatchedTime += endTime - videoStartTime;
                    console.log('video ended!');
                } else {
                    videoPlaying= false;
                    var pauseTime = new Date();
                    videoWatchedTime += pauseTime - videoStartTime;
                    console.log('video stopped!');
                }
            });

            player.on('play', function () {
                videoPlaying= true;
                videoStartTime = new Date();
                console.log('video playing!');
            });

            player.on('pause', function () {
                videoPlaying= false;
                var pauseTime = new Date();
                videoWatchedTime += pauseTime - videoStartTime;
                console.log('video stopped!');
            });

            player.on('ended', function () {
                videoPlaying = false;
                var endTime = new Date();
                videoWatchedTime += endTime - videoStartTime;
                });
                console.log('video finished!');
            });

        }

    $(window).on("unload", function () {
            var endTime = new Date();
            if (videoPlaying)
                videoWatchedTime += endTime - videoStartTime;
            var eId = $('#courseId').val();
            $.ajax({
                type: "POST",
                url: "@Url.Action("SaveSpentTime", "Course")",
                data: { "courseId": eId, "totalTime": endTime - startTime, "watchedTime": videoWatchedTime },
                dataType: "json",
                success: function (data) {
                    if (data.res == 1) {

                    }
                    $.magnificPopup.close();
                }
            });
        });
    }
});

, эти функции не работают после смены источника iframe. Что я делаю неправильно?