How to replace default video player with plyr.js ?

[kgnfth]

With fancybox you could do something like this in pure js

window.Plyr = require('plyr/src/js/plyr');

$("[data-fancybox]").fancybox({
    afterShow: function() {
        const player = new Plyr.setup('.fancybox-video', {});
    }
});

but with vue-cool-lightbox i can do it like this

<template>
      <CoolLightBox
        :items="data"
        :index="imageIndex"
        :effect="'fade'"
        :use-zoom-bar="true"
        @close="imageIndex = null"
        @on-open="plyr"
      >
      </CoolLightBox>
</template>

<script>
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'

export default {
  methods: {
    plyr() {
      return Plyr.setup('.cool-lightbox-video')
    }
  },
}
</script>

it works, but when i click the middle play button, then the lightbox is closing
same for the bottom left play button or other plyr interaction buttons
see video for demonstration

Jrqptw8tLD.mp4

Youtube link: https://youtu.be/ETddGVtEQbk

[killwing]

Because click to close will check:

var elements = '.cool-lightbox-zoom, .cool-lightbox-zoom *, .cool-lightbox-thumbs, svg, path, rect, .cool-lightbox-thumbs *, .cool-lightbox-button, .cool-lightbox-toolbar__btn, .cool-lightbox-toolbar__btn *, .cool-lightbox-button *, .cool-lightbox__slide__img *, .cool-lightbox-video, .cool-lightbox-caption h6, .cool-lightbox-caption p, .cool-lightbox-caption a';
      if (!event.target.matches(elements)) {
        this.close()
      }

A workaround is to add 'cool-lightbox-video' class to these controls:

        let list = document.querySelectorAll(".plyr__control");
        for (var i = 0; i < list.length; ++i) {
          if (!list[i].classList.contains('cool-lightbox-video')) {
            list[i].classList.add('cool-lightbox-video');
          }
        }

Look forward to the official fix.

[kgnfth]

Because click to close will check:

var elements = '.cool-lightbox-zoom, .cool-lightbox-zoom *, .cool-lightbox-thumbs, svg, path, rect, .cool-lightbox-thumbs *, .cool-lightbox-button, .cool-lightbox-toolbar__btn, .cool-lightbox-toolbar__btn *, .cool-lightbox-button *, .cool-lightbox__slide__img *, .cool-lightbox-video, .cool-lightbox-caption h6, .cool-lightbox-caption p, .cool-lightbox-caption a';
      if (!event.target.matches(elements)) {
        this.close()
      }

A workaround is to add 'cool-lightbox-video' class to these controls:

        let list = document.querySelectorAll(".plyr__control");
        for (var i = 0; i < list.length; ++i) {
          if (!list[i].classList.contains('cool-lightbox-video')) {
            list[i].classList.add('cool-lightbox-video');
          }
        }

Look forward to the official fix.

this works little but only when u click the play buttons
the rest buttons for example when u slide the volume, the modal moves together with it
and the fullscreen video is not on the center because of :style="aspectRatioVideo"

[lucaspulliese]

Hello @kgnfth and @killwing!

I'm working on this component again, I'll let you know as soon as I have it fixed.

[lucaspulliese]

Hey guys @killwing @killwing, please update the component to version 2.7.3.

Things to consider:

• In case that you have effect fade I added a new event called on-change-end. So now the setup of the component should be like this:

<CoolLightBox
  effect="fade"
  :items="items" 
  :index="index"
  @on-change-end="plyr"
  @close="index = null">
</CoolLightBox>

That is because when effect is fade the slide element is removed from the DOM when is changed, so we have to run that function every time when the new slide is shown.

• In case that you have effect swipe the setup of the component should be like this:

<CoolLightBox
  effect="fade"
  :items="items" 
  :index="index"
  @on-open="plyr"
  @close="index = null">
</CoolLightBox>

You should run once that function, only when the lightbox is opened.

Let me know if that works correct for you.

[kgnfth]

@lucaspulliese Hi, thank you it works great now, but there is one little issue where the plyr.js styles are little messed up

see demo here https://pixelphoto-demo.netlify.app/ click on plyr.js test
user = demo
pass = password

the plyr.js buttons is messed beacause of padding 0

https://github.com/lucaspulliese/vue-cool-lightbox/blob/master/src/components/CoolLightBox.vue#L2301

and the slider or seeker or progress or whatever it is called 🤣 is because of margin 0

https://github.com/lucaspulliese/vue-cool-lightbox/blob/master/src/components/CoolLightBox.vue#L2302

And the fullscreen stays at top left because of :style="aspectRatioVideo"

[lucaspulliese]

Oh yes, I see, sorry, my bad, could you post a screenshot of fullscreen stays at top left because of :style="aspectRatioVideo" please? And I will let you know when all of this are fixed.

[killwing]

Found another issue: can not close the player when click outside. 😀

[kgnfth]

i have resolved the plyr style by removing the import statement, instead i add the css to the head

  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: '//cdnjs.cloudflare.com/ajax/libs/plyr/3.6.7/plyr.css',
        },
      ],
    }
  },

this will load the plyr css above vue-cool-light-box
but the fullscreen remains the same

you can see it in action here https://pixeldemo.netlify.app/albums/plyr-js-test

[kgnfth]

Whatever

[russ]

For what it's worth, this was enough to get past this issue for me.

.plyr {
  height: auto !important;
}