How to use Plyr for vimeo in Fancybox 3?

Question

I'm using Plyr to customize the player skin on embedded Vimeo videos.

But I'm having trouble using it with the Fancybox 3 lightbox script. And I can't use the inline option in Fancybox because in some cases I will be loading the links/posts using AJAX.

Is there a way of firing off the Plyr script only when I click on a lightbox link?

Thanks in advance!

Answer 1

fancybox can display any html code, therefore there is no reason it would not not work with Plyr.

If you want to load content using ajax, then you most likely will need to use callbacks to initialize Plyr. It would be something like this:

$("[data-fancybox]").fancybox({
  beforeShow : function() {
    const player = new Plyr('#player');
  }
});

Quick demo - https://codepen.io/anon/pen/gdZYbL