Plyr: Changing data-video-id on fly

[Matoo125]

Hello I am trying to create bootstrap modal with video. Actually multiple modals with multiple videos. I am creating dynamic modal content and changing only data-video-id.

The problem is, that player on web page already has different attributes and doesn't care about data-video-id so it cannot load the videos.

Do you have any suggestions how should I solve this?
thanks. Matej.

---------- UPDATE ----------------

I found this topic in documentation, but I have hard times making it work

<div style="height: 400px; width: 400px;">
<div class="js-player" data-type="youtube" data-video-id=""></div>
</div>

<script>
var player = plyr.setup('.js-player');

instance.on('ready', function(event) {
  var instance = event.detail.plyr;
  player.source({
      type:       'video',
      title:      'Example title',
      sources: [{
          src:    'bTqVqk7FSmY',
          type:   'youtube'
      }]
    });
});
</script>

I'm doing something like this. Maybe it's stupid. I don't know better

[sampotts]

Why not both add the id and then the call plyr.setup() in a modal show callback?

[Matoo125]

Yes. Now it almost works.

It successfully creates the first video. Then every other modal shows the same.

I tried to solved it with
plyr.destroy(); when modal is closed
but i get
Uncaught TypeError: plyr.destroy is not a function

[sampotts]

In your case it would be player.destroy() - API methods need to be accessed via the instance.

[Matoo125]

<script>
var player;
$('#videoModal').on('show.bs.modal', function (event) { // on modal show
  var button = $(event.relatedTarget) // Button that triggered the modal
  var video-id = button.data('url') // Extract info from data-* attributes

  $('#video') // pick element with video id
    .attr('data-video-id', video-id); // set data-video-id to video-id

  player = plyr.setup(); / create instance of plyr
  console.log('hello ' + player); // output: hello [object Object]

})

  $('#videoModal').on('hidden.bs.modal', function (event) { // when modal hidden
    $('#video') // pick the right element
    .attr('data-video-id', '');  // empty the video id

    player.destroy(); // should destroy the instance

    console.log('hello ' + player); // output: Uncaught TypeError: player.destroy is not a function
})

</script>

This is my jQuery code. Unfortunately I still wasn't able to destroy the instance.

[sampotts]

Setup always returns an array (as more than one can be setup at a time) so you need to use:

player = plyr.setup()[0];

[Matoo125]

thanks. Now it is working

[sampotts]

Cool 👍

[ESTUDIOCRU]

@sampotts we're facing a fairly similar situation on a project, but not using Bootstrap.

There's a grid of videos and each one will open a modal with its player.

I have this js code — md code tags aren't formatting correctly :(

let projetos = document.querySelectorAll('.videoSlider .projeto .videoHold a'); // this gets the videos elements inside a bxSlider
let lightBox = document.querySelector('#lightBox');
let playerHold = document.createElement('div'); // create player div to put inside lightbox later
playerHold.classList.add('videoPlayer');
playerHold.setAttribute('data-plyr-provider', 'vimeo');

Array.prototype.forEach.call(projetos, (p,i) => {
p.addEventListener('click', () => {
lightBox.classList.add('open'); // css transition trigger
playerHold.setAttribute('data-plyr-embed-id', p.getAttribute('data-id')); // get the data-id attr from project clicked and set as attr to player
lightBox.appendChild(playerHold); // right?
player = Plyr.setup('.videoPlayer')[0]; // adapted from previous answer
})
})

lightBox.addEventListener('click', () => {
lightBox.classList.remove('open');
player.destroy(); // right?
lightBox.innerHTML = ''; // delete div
})

But things aren't happening exactly as expected.

• First click works perfectly, it opens the lightbox with correct player inside.
• When I click the lightbox, it closes and clears content, so I think it's ok too — or not? Maybe Plyr is't destroyed here?
• When I click another project, the div created inside is something like
  <div class="videoPlayer" data-plyr-embed-id="294010194" style="transform: translateY(-38.2812%);"></div>

I mean... what is this translateY? Why it's not initializing Plyr again?