To scale a MediaElementJS video to fit any browser, tablet or mobile device for responsive design you need to change the width and height values in the video tag to be 100%, and also declare the width of the parent containing div in CSS,
first the setup.....
Initial Set Up
To kickstart with MediaElement JS you need to copy the build folder of the downloaded MediaElement files to your web root directory.
You need to reference 3 files in the build directory in the <head></head> of your document
<script src="build/jquery.js"></script> <script src="build/mediaelement-and-player.min.js"></script> <link rel="stylesheet" href="build/mediaelementplayer.css" />
Then you need to fire the MediaElement script when the page has loaded, create a custom.js file in the build directory and also reference it in the <head></head>
<script src="build/custom.js"></script>
with the content of:
$(document).ready(function(){$('video, audio').mediaelementplayer();});
Now all video and audio elements on the page will be targetted by MediaElement
To help generate your video code, you can use VFE, at the most you need an mp4 as source, example of code is:
<video id="my_video_1" controls="controls" preload="auto" width="640" height="264" poster="my_video_poster.png" <source src="my_video.mp4" type='video/mp4'> </video>
Set Up MediaElement JS to scale videos for all browsers, tablets and mobile
To get this going for responsive design is quite simple; you need to change the inline video width and height values to 100% and then add that video code into a containing div with a max-width(px) and width(%) value set.
<video id="my_video_1" style="width:100%;height:100%;" controls="controls" width="100%" height="100%" preload="auto" poster="my_video_poster.png" <source src="my_video.mp4" type='video/mp4'> </video>
So in the code above note the width and height are set to 100%, but also note the additional style="width:100%;height:100%;". The reason is that IE9 sees 100% as 100px when declared as an attribute, so you end up with a small square, so here IE9 we use an inline CSS style in which the % is honoured, in IE 8 & 10 the attribute %percentage value is honoured.
The video code sits in a div with a class of .videocontent with CSS:
.videocontent {
width:80%;
max-width: 640px;
margin: 0 auto;
}
In the example on this page the video sits in a containing div with width:80% and max-width:640px, the width value takes care of the scaling value in proportion to it's parent container and I have set the max-width value as I don't want the video displayed as a size beyond 640px. When it hits 640px it is not going any further, conversley you can set the min-width in pixels too.
MediaElement JS and WordPress
Since WordPress version 3.6(ish) MediaElementjs is actually used as the default video/audio player which is great
What's even better is that the video will scale to its containing element so you don't have to worry about anything, just supply in a source mp4
[video src="http://myvideliveshere.com/video.mp4"]
Thats it, the MediaElementJS video element should scale as the viewport changes. To see the set up with minimal code in the source here is a barebones example
Below are some plugin extensions for the main CMS systems.