Sprig Pagination and videos with plyr.io script doesn't work correctly on paginated page

[CreateSean]

Craft 4.2.5.2 Sprig 2.2.1

I've got sprig pagination working fine. It loads the next page successfully however the videos which are run using the plyr.io script. use the YouTube player on sprig paginated pages. See screen recording: Screen Recording - dropbox

main template

   {# make blog pagination reactive with sprig #}
  {{ sprig('videos/_components/video-listing', { 'limit':8}) }}

    <script>
    htmx.on('htmx:afterSwap', function(event) {
      // scroll to top so we aren't left at the bottom of the new page
      window.scrollTo(0, 50);
    });
  </script>

video listing template

  {% set seg2 = craft.app.request.getSegment('2') %}

  {# set variable for sprig to hook into with default for first page load #}
  {% set page = page ?? 1 %}

  {{ hiddenInput('page', page) }}
  {% set params = { section: 'videoRecordings', limit: limit } %}

  {% set entryQuery = craft.entries(params) %}

  {# Paginates the entry query given the current page #}
  {% set pageInfo = sprig.paginate(entryQuery, page) %}
  {% set entries = pageInfo.pageResults %}

  <div class="video-grid">
    {% for entry in entries %}
      <div class="video-item">

  <div class="plyr__video-embed" id="player{{ entry.id }}">
    <iframe
      style="position:static;"
      src="https://www.youtube.com/embed/{{ entry.youtubeLink|replace({'https://youtu.be/': ""}) }}?origin={{ siteUrl }}&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
      allowfullscreen
      allowtransparency
      allow="autoplay"
    ></iframe>
  </div>

        {# more code #}
      </div>

      {% js %}
        const player{{ entry.id }} = new Plyr('#player{{ entry.id }}');
      {% endjs %}
    {% endfor %}
  </div><!-- /.row -->

  {# plyr script #}
  {# <script src="https://cdn.plyr.io/3.7.2/plyr.js"></script> #}

  {# pagination #}
  {% include "videos/_components/pagination" %}

  {% do sprig.pushUrl('?' ~ {page: page,}|url_encode) %}

I'm stuck and not sure how to troubleshoot this. Please advise

[bencroker]

I'm unfamiliar with Plyr, but one thing that stands out is that you should be using <script> tags in your Sprig component, rather than {% js %} tags, since this is a template partial and not a full page.

[CreateSean]

Ben,

That helped. I moved it into a script tag and changed

constplayer{{ entry.id }} = new Plyr('#player{{ entry.id }}');

to

var player{{ entry.id }} = new Plyr('#player{{ entry.id }}');

with const I was getting Uncaught SyntaxError: Identifier 'player4274' has already been declared but once I changed to var all good.

[bencroker]

Great! If you're not referencing the player later, I assume it is safe to drop the variable completely.

<script>
    new Plyr('#player{{ entry.id }}'); 
</script>