Lazy loading a vimeo video

Hi everyone,

I am trying to lazyload a vimeo video but I am having some issues.Here is my code:

<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!');

      // 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>

I am using a script called lazy sizes to lazyload the iframe as in specifies in the docs

When the video is lazyloaded I am then initiating the vimeo player in the same way they specify in their docs

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

Everything works as expected except I am unable to attach the vimeo event handlers to the new vimeo player?

However strangely if I add a settimeout before I try to attach the eventhandlers it works?

<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>

Ideally I do not want to use a timeout. I had hoped that adding the .ready().then() promise would ensure the video was ready before I attempt to attach the handlers.

Is there something I am missing here?

Any help appreciated! Thanks!

Try using lazybeforeunveil, I don’t think you need the on() handlers inside a ready.

This seems to work

There is also a plugin for video embeds but I didn’t try it.

2 Likes

Awesome, this works great! Thanks very much