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

I'm having some headaches to implement a BGM and BGS system for a fanfics 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 audio "tracks", characterized by 2 classes, being that when starting one of the audios or videos of the same "band" (HTML class), only all others of the same class should stop.

HTML is basically this:

<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 this :

$(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 I realized that youtube only renders with the video tag, but I intend to use it from a variety of sources, including mp3 ogg etc, which only render in the audio tag. This issue of Youtube only rendering in is a mediaelement bug or is it expected?

Well, thank you in advance!