Loading the video plugin

[timnilson]

I've tried to extend the stimulus component to load the needed lightgalleryjs video plugin to show YouTube videos. However, I can't get that working. Could you add an example in the documentation on how to do this? Thank you! Love your work Guillaume!

[adrienlamotte]

Same question here, we need to use the video plugin... Did you found a solution @timnilson?

[timnilson]

@adrienlamotte No, I never got that working.

[rozhok]

Add video and thumbnails to the importmap.rb:

pin "stimulus-lightbox", to: "https://ga.jspm.io/npm:stimulus-lightbox@3.2.0/dist/stimulus-lightbox.mjs"
pin "lightgallery", to: "https://ga.jspm.io/npm:lightgallery@2.7.1/lightgallery.es5.js"
pin "lg-video", to: "https://ga.jspm.io/npm:lightgallery@2.7.1/plugins/video/lg-video.es5.js"
pin "lg-thumbnail", to: "https://ga.jspm.io/npm:lightgallery@2.7.1/plugins/thumbnail/lg-thumbnail.es5.js"
pin "lg-zoom", to: "https://ga.jspm.io/npm:lightgallery@2.7.1/plugins/zoom/lg-zoom.es5.js"

Override controller and default options:

import Lightbox from 'stimulus-lightbox'

import lgVideo from 'lg-video'
import lgThumbnail from 'lg-thumbnail'
import lgZoom from 'lg-zoom'

export default class extends Lightbox {
  connect() {
    super.connect()
  }

  get defaultOptions() {
    return {
      controls: true,
      loop: true,
      plugins: [lgZoom, lgVideo, lgThumbnail]
    }
  }
}

Add styles (I don't know how to add them when using tailwindcss-rails):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lightgallery.min.css" integrity="sha512-F2E+YYE1gkt0T5TVajAslgDfTEUQKtlu4ralVq78ViNxhKXQLrgQLLie8u1tVdG2vWnB3ute4hcdbiBtvJQh0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-video.min.css" integrity="sha512-89gDQOHnYjji90NPJ7+M5tgA/0E+fjL4KuSFhi6tjH6sZ54yUEogPMmOAgbI599fW1CtCyrsJbch8k/QzuoXzw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-zoom.min.css" integrity="sha512-vIrTyLijDDcUJrQGs1jduUCSVa3+A2DaWpVfNyj4lmXkqURVQJ8LL62nebC388QV3P4yFBSt/ViDX8LRW0U6uw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.1/css/lg-thumbnail.min.css" integrity="sha512-GRxDpj/bx6/I4y6h2LE5rbGaqRcbTu4dYhaTewlS8Nh9hm/akYprvOTZD7GR+FRCALiKfe8u1gjvWEEGEtoR6g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Don't forget to use overriden controller filename instead of lightbox.

You're done.