Ленивая загрузка видео

Question

Я пытаюсь лениво загрузить видео vimeo, но у меня возникают некоторые проблемы. Вот мой код:

<style>
  .content-block {
    width: 200px;
    height: 3000px;
    background-color: red;
  }
</style>

<div class="content-block"></div>

<iframe class="lazyload" data-src="https://player.vimeo.com/video/76979871?autoplay=1&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen
  mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.5/lazysizes-umd.min.js"></script>
<script>
  var iframe = document.querySelector('iframe');

  function handleLazyLoad() {
    if (iframe.classList.contains('lazyload')) {
      const storeSRC = iframe.dataset.src;

      iframe.addEventListener('lazyloaded', () => {
        delete iframe.dataset.src;
        iframe.src = storeSRC;
        initPlayer();
      });
    } 
  }

  function initPlayer() {
    var player = new Vimeo.Player(iframe);
    player.ready().then(function (){
      console.log('player is ready!');

      // These events are not attaching? Why?
      player.on('play', function () {
        console.log('played the video!');
      });

      player.on('ended', function () {
        console.log('the video has ended');
      });
    });
  } 

  handleLazyLoad();

</script>

Я использую скрипт с именем lazy sizes, чтобы lazyload iframe, как это указано в документации

https://github.com/aFarkas/lazysizes

Когда видео загружено, я запускаю Vimeo Player точно так же, как они указывают в своих документах

https://github.com/vimeo/player.js/

Все работает, как и ожидалось, за исключением того, что я не могу подключить обработчики событий vimeo к новому проигрывателю vimeo?

Как ни странно, если я добавляю settimeout, прежде чем пытаться подключить обработчики событий, это работает?

<style>
  .content-block {
    width: 200px;
    height: 3000px;
    background-color: green;
  }
</style>

<div class="content-block"></div>

<iframe class="lazyload" data-src="https://player.vimeo.com/video/76979871?autoplay=1&muted=1" width="640" height="360" frameborder="0" webkitallowfullscreen
  mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.5/lazysizes-umd.min.js"></script>
<script>
  var iframe = document.querySelector('iframe');

  function handleLazyLoad() {
    if (iframe.classList.contains('lazyload')) {
      const storeSRC = iframe.dataset.src;

      iframe.addEventListener('lazyloaded', () => {
        delete iframe.dataset.src;
        iframe.src = storeSRC;
        initPlayer();
      });
    } 
  }

  function initPlayer() {
    var player = new Vimeo.Player(iframe);
    player.ready().then(function (){
      console.log('player is ready!');

      setTimeout(function() {
        // Now these events attach as I would like them to ?
        player.on('play', function () {
          console.log('played the video!');
        });

        player.on('ended', function () {
          console.log('the video has ended');
        });
      }, 1000);
    });
  } 

  handleLazyLoad();

</script>

В идеале я не хочу использовать тайм-аут.Я надеялся, что добавление обещания .ready().then() обеспечит готовность видео до того, как я попытаюсь подключить обработчики.

Есть ли что-то, чего мне здесь не хватает?

Любая помощь приветствуется!Спасибо!