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.

Solution 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'
});

Solution 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: []
});

Solution 3

I was digging through stackoverflow threads looking to solve a problem similar to yours. MEJS 2.9.3 download comes with a demo/mediaelementplayer-responsive.html example that worked for me to get the video changing size inside a div:

<div class="wrapper">
    <video width="640" height="360" style="width: 100%; height: 100%; z-index: 4001;" id="player1">
        <!-- Pseudo HTML5 -->
        <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
    </video>
</div>

Initialize like normal from there, then resize the wrapper! Example does fullscreen perfectly as well.

Solution 4

I used flash as default

$('video,audio').mediaelementplayer( { mode: 'auto_plugin' } );

I sniffed the code and read the following

mejs.MediaElementDefaults = {
// allows testing on HTML5, flash, silverlight
// auto: attempts to detect what the browser can do
// auto_plugin: prefer plugins and then attempt native HTML5
// native: forces HTML5 playback
// shim: disallows HTML5, will attempt either Flash or Silverlight
// none: forces fallback view
mode: 'auto',
// remove or reorder to change plugin priority and availability
plugins: ['flash','silverlight','youtube','vimeo'],
// shows debug errors on screen
enablePluginDebug: false,
// overrides the type specified, useful for dynamic instantiation
type: '',

Solution 5

This works excellently for both flash, as well as HTML5.

CSS: Seamless full screen video, ready for iframe embed.

    body{width: 100%; height: 100%; margin: 0; padding: 0; overflow:hidden;}
    video{max-height:100%}
    .me-plugin {width: 100%; height: 100%;}

---

HTML:

    <video style="width: 100%; height: 100%;">

---

JS: Just in case -- I added this to the mix.

    var x = $(window).width();  
    var y = $(window).height(); 

    $(window).resize(function() {   
      var x = $(window).width();    
      var y = $(window).height();   
    });

    // Initialize your video
    $('video').mediaelementplayer({
        defaultVideoWidth: x, 
        defaultVideoHeight: y
    });

---

This took me some time to figure out so be sure to +1!

View more solutions