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!