🇺🇸United States @shadowwolf218

Confirming this issue with the 2.x-dev branch as well. Drupal 9.5.10, PHP 8.2.5

Steps to reproduce: install module, set mediaelement as the formatter for the (video) view field, log in and visit any page with a video.

The version of the previously posted fix I opted for is somewhat different, and I cannot tell you why it works - or, in fact, *if* it works (or simply breaks something invisible to me). However, I can confirm that the prior fix did break the rendering for logged in users, causing a fallback to the browser's native player...and whatever I've managed, despite fairly thorough testing, doesn't seem to have broken anything.

As far as I can tell, '.mediaelementjs' in the original code is the culprit. For reasons that are unclear to me, but perhaps have to do with how the containers are classed, replacing this with 'mediaelementjs' fixed the issue entirely. When the issue is present, for logged in users (and *only* logged in users) the div "mejs__layers mejs__overlay mejs__overlay-play" renders 3-4 separate times, causing the video to be nonfunctional and show the overlapping in the pictures above.

From my limited understanding, this is likely because Drupal produces additional script calls to verify a user's logged-in status and check access permissions, and for some reason Drupal/once is failing to append "data-once" in a way that prevents those calls from re-triggering the bundle script every time this happens.

I also removed what I believe to be a redundant "attach," but I'll freely admit that about a half-hour of A/B testing showed no functional difference with or without that.

My "fix":

'use strict';

(function (Drupal, $, once) {
  Drupal.behaviors.mediaelement = {
    attach: function (context, settings) {
      $(once('mediaelement', 'mediaelementjs', context)).each(function () {
        $(this).mediaelementplayer(settings.mediaelement);
      });

      // Attach player to other elements if MediaElement.js is set to global.
      if (settings.mediaelement.attachSitewide !== undefined) {
        $(once('mediaelement', 'audio,video', context)).each(function () {
          $(this).mediaelementplayer(settings.mediaelement);
        });
      }
    }
  };
})(Drupal, jQuery, once);

Hope this helps in some way.