Манипулировать Vimeo Player с угловой 5

Question

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

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

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

var player = $f(iframe);

в этой строке я не понимаю, как я использую здесь $ f (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>