Trigger a Resize on a MediaElement.js Video in Wordpress

Question

I have a post type which is displayed in modal windows. The modals are created using the Remodal library.

Unfortunately when the modal is opened the MediaElement.js video players inside have already been initialized at incorrect dimensions - the height and width are set in inline styles with dimensions around 1600px width and 900px height. The width adjusts itself to the width of the modal but the height does not, which is creating giant black bars above and below the video.

I'm looking for a way to grab the MediaElement.js player and resize the videos when the modal is opened. Because it's initialized by Wordpress I'm not sure how to grab it. From other questions on Stack it seems that the players are inside an mejs object, and there is a built in method to resize the player and controls. However, I tried various things to try to call the resize methods on the player but nothing has worked so far. For example:

if ( mejs.players.length ) {
  mejs.players.each(function() {
    $(this).setPlayerSize();
    $(this).setControlsSize();
  }
}

Answer 1

My current solution is to trigger a window resize event, which causes the video to resize. (Note: jQuery trigger event doesn't work.)

$(document).on('opening', '.remodal', function () {

  // Trigger window resize event to fix mejs video size issues.
  // Don't use jquery trigger event since that only triggers
  // methods hooked to events, and not the events themselves.
  if ( typeof( Event ) === 'function' ) {
    window.dispatchEvent( new Event( 'resize' ) );
  } else {
    var event = window.document.createEvent( 'UIEvents' );
    event.initUIEvent( 'resize', true, false, window, 0 );
    window.dispatchEvent( event );
  }

});