Make MediaElement.js fill its container and fullscreen
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
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'
});