Mediaelement.js - Pause/Stop all other audios/videos in the same class when starting any

Question

I’m having some headaches to implement a BGM and BGS system for a fanfic site here.

I’m using mediaelement.js for mobile interoperability and support for Youtube videos.

Anyway, I’m trying to implement exactly what is in the title: Two "Tracks" audio, characterized by 2 classes, and when starting one of the audios or videos of the same "track" (HTML class), only all others of the same class should stop.

HTML is basically that:

<audio class="bgm">
  <source></source>
  ...
</audio>
<video class="bgm">
  <source></source>
  ...
</video>

<video class="bgs">
  <source></source>
  ...
</video>
<audio class="bgs">
  <source></source>
  ...
</audio>

While the javascript is that:

$(document).ready(function() {
    $('.bgm').mediaelementplayer({
        startVolume: 0.8,
        loop: false,
        features: ['playpause', 'volume'],
        alwaysShowControls: true
    });
    $('.bgm').each(function() {
        var myBGM = this;
        this.addEventListener('play', function() {
            $('.bgm').each(function() {
                if (!(this === myBGM)) {
                    this.stop();
                }
            });
        });
    });
    $('.bgs').mediaelementplayer({
        startVolume: 0.8,
        loop: true,
        features: ['playpause', 'volume'],
        alwaysShowControls: true
    });
    $('.bgs').each(function() {
        var myBGS = this;
        this.addEventListener('play', function() {
            $('.bgs').each(function() {
                if (!(this === myBGS)) {
                    this.stop();
                }
            });
        });
    });
});

Note: I use as much as , because I realized that youtube only renders with the video tag, but I intend to use from various sources, including mp3 ogg etc, which only render in the audio tag. This issue of Youtube only render on is a mediaelement bug or is expected?

Finally, thanks in advance!