YouTube video won't stop playing when the lightbox is closed

[janosrusiczki]

No description provided.

[MagnusJohansson]

Any updates on this?
It's annoying, and it's blocking me from using this component.

[janosrusiczki]

No updates, from what I investigated I either have to switch to embedding by the YouTube API and send a pause command when the light box is closed OR I have to remove the element containing the YouTube embed when the light box is closed.

[AlexMeuer]

We can work around this issue for now by using a key to force the lightbox to rebuild.

<LightBox
        ref="lightbox"
        :key="lbKey"
        :show-thumbs="false"
        :show-light-box="false"
        :media="media"
        @onOpened="onLightboxOpened()"
        @onClosed="onLightboxClosed()"
      ></LightBox>

data: () => ({
    lbKey: 0,
    lbOpen: false,
    media: [ ... ],
},
methods: {
    showVideo() {
      this.$refs.lightbox.showImage(0);
    },
    onLightboxOpened() {
      this.lbOpen = true;
    },
    onLightboxClosed() {
      if (!this.lbOpen) return;
      this.lbOpen = false;
      this.lbKey++;
    },
},

Keeping track of whether the lightbox is open is important, because the relevant onOpened/onClosed event is emitted immediately when the component is built (and we want to avoid infinite loops).