Make MediaElement.js fill its container and fullscreen

Question

I have an absolutely positioned div and I want MediaElement.js to fill it with a video. The size of the div changes when the user resizes the window, and I'd like the video to change size with it.

I tried this guy's methods, but if I fullscreen the video after resizing it that way, the fullscreened version doesn't fill the whole screen anymore in flash or html5 mode. It shows up in the top left corner instead.

In fact, even if I don't set size information at all and fullscreen it in flash, the ui gets kind of messed up: the seek bar overlaps the pause/play button.

MediaElement.js is inconsistent and buggy as hell, but it's the best thing I could find. It supports flash fullscreen unlike Video.js. It's easier to customize and theme than JWPlayer, and doesn't just jump back to the start of a flash video when I try to seek like JWPlayer does. If I could get past its shortcomings, it'd be pretty useful.

Answer 1

To configure MediaElement.js to make both HTML5 and Flash players fill their container and resize responsively you have to do this:

$('video').mediaelementplayer({
  videoWidth: '100%',
  videoHeight: '100%',
  enableAutosize: true,
  plugins: ['flash'],
  pluginPath: '/swf/',
  flashName: 'flashmediaelement.swf'
});

Answer 2

After a lot of testing I have found that the order of the video attributes make a huge difference in playing the videos correctly in mediaelement. Using the settings below will let you play and resize youtube videos in all browsers. The 50% width on the myvids div looks strange but without it the video will not size properly in IE. I have only one issue that I am trying to resolve at this point. When opening on the iPad the play button moves to the top/left corner of the video. If I set a width and height on the video instead of percentages the play button shows up properly but then the player does not resize.

<div class="myvids" id="viddivap1" width="50%" style="width:100%;position:relative;">
  <video class="thevid" width="640"  height="360" style="max-width:100%;height:100%;" id="my_video_ap1" preload="auto"  autoplay controls="controls" >
    <source type="video/youtube" src="http://www.youtube.com/watch?v=FAGL9gxhdHM" />
    <span style="color:white;">Your browser does not support HTML5, Flash, or Silverlight.  Please update your browser.</span>
  </video>
</div>

$('video').mediaelementplayer({

    // if set, overrides <video width>
    videoWidth: -1,
    // if set, overrides <video height>
    videoHeight: -1,
    // width of audio player
    audioWidth: 400,
    // height of audio player
    audioHeight: 30,
    // initial volume when the player starts
    startVolume: 0.8,
    // useful for <audio> player loops
    loop: false,
    // enables Flash and Silverlight to resize to content size
    enableAutosize: true,
    // the order of controls you want on the control bar (and other plugins below)
    features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],
    // Hide controls when playing and mouse is not over the video
    alwaysShowControls: false,
    // force iPad's native controls
    iPadUseNativeControls: false,
    // force iPhone's native controls
    iPhoneUseNativeControls: false, 
    // force Android's native controls
    AndroidUseNativeControls: false,
    // forces the hour marker (##:00:00)
    alwaysShowHours: false,
    // show framecount in timecode (##:00:00:00)
    showTimecodeFrameCount: false,
    // used when showTimecodeFrameCount is set to true
    framesPerSecond: 25,
    // turns keyboard support on and off for this instance
    enableKeyboard: true,
    // when this player starts, it will pause other players
    pauseOtherPlayers: true,
    // array of keyboard commands
    keyActions: []
});