I'm using PLyr (https://plyr.io/) to output a couple of videos on the page - one displayed on desktop and the other on mobile.

There is a single custom button that toggle play.

The problem is that this event toggles play on both videos.

What I want is for the button to only target one video at a time given the viewport size.

This is a rough version of the code.

I'm using .each and trying to target individual players by players[index] but this isn't working

    <video id="video-1">
     <source src="" type="video/webm">
     <source src="" type="video/mp4">
    </video>

    <video id="video-2">
     <source src="" type="video/webm">
     <source src="" type="video/mp4">
    </video>

const players = Plyr.setup(".player");

// Expose player so it can be used from the console
window.player = players;

// Play each video
videoWrapper.each(function (index, video) {
    $('player').on("click touchend", function () {
        players[index].togglePlay();
    });
}

I suppose I could do something like the following but this seems messy. Are there any better options?

    $(window).resize(function() {
     if($(this).width() < 768) {
      $('#video-1').on("click", function () {
        playPause();
        anotherFun(); 
      });
        } else {
          $('#video-2').on("click touchend", function () {
            playPause();
            anotherFun(); 
        });
      }
    });