Make MediaElement.js fill your container and fullscreen

Question

I have an absolutely positioned div and I want MediaElement.js to populate its video. The div is resized when the user resizes the window, and I would like the video to resize it.

I tried this guy methods , but if I am in full-screen video after resizing it, the full-screen version no longer fills the entire screen in flash memory or html5 mode. It is displayed in the upper left corner.

In fact, even if I do not set the size information at all and the full-screen mode in the flash memory, ui becomes a little spoiled: the search bar overlaps the pause / play button.

MediaElement.js is incompatible and buggy, but this is the best I could find. It supports full screen flash, unlike Video.js. It’s easier to customize the theme than JWPlayer, and not just go back to the beginning of the flash video when I try to search like JWPlayer. If I could overcome my shortcomings, that would be very helpful.

Answer 1

To configure MediaElement.js so that both HTML5 and Flash players fill their container and resize it, you should do this:

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

Answer 2

After much testing, I found that the order of the video attributes is of great importance for the correct playback of the video in the media element. Using the settings below, you can play and resize YouTube videos in all browsers. The 50% width on myvids div looks weird, but without it the video would not change correctly in IE. I have only one problem that I am trying to solve at this point. When opened on the iPad, the play button moves to the top / left corner of the video. If I set the width and height of the video, rather than percentages, the play button displays correctly, 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 native controls iPadUseNativeControls: false, // force iPhone native controls iPhoneUseNativeControls: false, // force Android 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: [] }); 

Answer 3

I rummaged through stackoverflow threads to solve a problem similar to yours. Download MEJS 2.9.3 comes with an example demo / mediaelementplayer-responsive.html that worked for me to resize the video in 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, as usual, from there, then resize the wrapper! The example also works fine in full screen mode.

Answer 4

I used flash by 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: '', 

Answer 5

This works great for both flash and HTML5.

CSS: full-screen full video, ready to embed iframe.

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

---

It took me a while to figure it out, so don’t forget +1!