Some javascript to fix media widget display issues in WordPress 4.8

widgets.js

// Use a timeout so we can ensure any resizing/ transitions are complete. May need to make the duration a little longer.
// This code should be called from the code that makes the hidden widgets visible. For example in the button click event.
// Requires jQuery for a couple of bits - shouldn't be a problem since most WordPress themes use it.
setTimeout(
  function() {

    // Remove any media elements currently initialised.
    // Should change .sidebar-overlay to match the html on your site.
    // This should be some sort of container that holds the hidden widgets.
    // The container is used to ensure widgets in visible sidebars are not affected.
    $( '.sidebar-overlay .mejs-container' ).each(
      function( i, el ) {
        // Remove the reference to the media player from the js object so that it will be reinitialized later.
        if ( mejs.players[ el.id ] ) {
          mejs.players[ el.id ].remove();
        }
      }
    );

    // Initialize overlay.
    if ( window.wp && window.wp.mediaelement ) {
      window.wp.mediaelement.initialize();
    }

    // Trigger window resize event to fix video size issues.
    // Don't use jqueries 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 );
    }

  },
  250
);