Манипулятор Vimeo Player с угловым 5

Question

Проверьте эту скрипку: она останавливает видео через 5 секунд и показывает кнопку КУПИТЬ СЕЙЧАС

Затем следует предыдущий ответ. И хорошо с Javascript/ JQuery. Мой проект в Angular 5, и я могу поймать iframe по его идентификатору. но не понимая, как мне перейти к дальнейшему коду для преобразования их из javascript в машинописный текст на угловом

Чтобы быть более точным, я добавил froogaloop2 в мои оценки и инициировал в файле component.ts.

var player = $f(iframe);

в этой строке я не понимаю, как я использую здесь $f(iframe). У меня есть iframe в моей руке.

Ниже приведен фрагмент, который вы можете найти в скрипке и там работает нормально. Здесь может быть проблема. Пожалуйста, проверьте ссылку выше.

$(function() {


var iframe = $('#player1')[0];
var player = $f(iframe);
var status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
setTimeout(function () {
player.addEvent('ready', function() {
status.text('ready');

player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
});
// Call the API when a button is pressed
$('bt1').bind('click', function() {
   player.api($(this).text().toLowerCase());
});

function onPause(id) {
    //when paused show alert
//    alert(id);
    
}

function onFinish(id) {

}

function onPlayProgress(data, id) {
status.text(data.seconds);
//set time var
var Time = data.seconds;
//if time is 10 seconds pause. 
    if (Time >= '5') {
   player.api('pause');
      var width = document.getElementById('player1').getAttribute('width');
            var height = document.getElementById('player1').getAttribute('height');
      console.log(width + '-' + height);
      var element = document.getElementById('bt1');
      element.style.left = width /2 - 100 + "px" ;
      element.style.top = height /2 - 50 + "px";
   document.getElementById('bt1').style.visibility='visible';
  }
    else
    {
   document.getElementById('bt1').style.visibility='hidden';    
    }
 }
});

#bt1 {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 20px;
  top: 50px;
  visibility: hidden;
}
.holder {
  width: 100%;
  height: 100%;
  position: absolute;
}

<div class="holder">
<script src="//f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="player1" src="//player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<div>
  <p>Status: <span class="status"></span></p>
</div>

<button  type="button" id="bt1" >BUY NOW
        </button>
</div>