Fullscreen black mediaelementjs version 2.16.2

Question

I can not do full screen videos in version 2.16.2. The screen goes black and says "Video Player" Any solution?

Answer 1

Starting with v2.16.x, MEJS inserts a full-width span over the fullscreen layer that inherits a solid background-color (black in Firefox / white in Chrome) :

<span class="mejs-offscreen mejs-video mejs-container-fullscreen" style="width: 100%; height: 100%;">Video Player</span>

As a workaround, you can set any of these CSS rules in your custom CSS:

span {
  background-color: transparent;
}

... or (after including the MEJS CSS file) :

.mejs-offscreen {
  background-color: transparent;
}

The mediaelement.js page has this CSS rule at line 40 of their reset.debug.css file :

span {
  background: none repeat scroll 0 0 transparent;
  ...
}

so the issue doesn't occur.

Answer 2

Adding

.mejs-offscreen {
  ...
  display: none;
}

in your mediaelementplayer.css or whatever you use as a CSS for Mediaelement.js works for Firefox but is broken for Chrome.

Adding something like

.mejs-offscreen {
  background-color: transparent;
}

disables controls in fullscreen mode, for this span (with mejs-offscreen class) overlaps it. They just made mistake somehow in the new version, bad testing or what.

I found workaround by editing the source of mediaelement-and-player.js. About the line #2219 is the code looking like this:

$('<span class="mejs-offscreen">' + videoPlayerTitle + '</span>'+
+ '<div id="' + t.id + '" class="mejs-container ' + (mejs.MediaFeatures.svg ? 'svg' : 'no-svg') + 

You should avoid inserting first span so the code will look like this:

            $('<div id="' + t.id + '" class="mejs-container ' + (mejs.MediaFeatures.svg ? 'svg' : 'no-svg') + 

Remember that the purpose of this span is an accessibility feature for Screen Reader users, so it is to be some other ways to overtake this.

More on the question is here: issue #1372