mediaelement.js — Video Scaling Options (e.g. 'fit' or 'fill')

Question

Does anyone know of a way to scale the video within the MEJS player so that the player itself will handle any letterboxing or columnboxing? Similar to how JWPlayer has the 'fit' and 'fill' options.

Essentially I've got a player that lives within a wrapper and I resize the wrapper according to the users screen resolution. Like so:

<div id="video_dims_wrapper" style="width: 1280px; height: 720px;">
    <video id="video_player" width="1280" height="720" controls="controls" preload="none" autoplay="autoplay" style="width: 100%; height: 100%;">           

        <source type="video/mp4" src="my_video.mp4" />
        <source type="video/webm" src="my_video.webm" />

        //Flash fallback removed for brevity

    </video>
</div>

And then I just resize the #video_dims_wrapper and the MEJS element contained within resizes accordingly (due to the width: 100%; height: 100%; style declarations).

This works well if all the videos are of the same aspect ratio (16:9 in this case), but if there happens to be a video of a different aspect ratio then it doesn't resize within the player but rather scales the total player dimensions up.

What I'd like to happen is that the playe always maintains a 16:9 aspect ratio and the video whithin scales to fit within the player and the player letterboxes or columnboxes the video as necessary.

Anyone run into this? Any solutions?

Thanks for any help.

Answer 1

I tried to do the same in an Wordpress environment. Sorry for exhuming this, but ik took me ages. But while looking into sourcecode of mediaelement.js I found this property:

// set dimensions via JS instead of CSS setDimensions: true; // (is the default property).

I just switched it while init to false (so I don't edited the source files). And did the styling with css. Voila! Works like a charm :). Just can say this funky script is badly documented! Of course I searched for properties like this onto the distributors website and googled hours... But never found that reported anywhere.

Hope I can help someone with this ;). Just for search engine, I searched for theese tags: Wordpress video letterbox embed flash fallback mediaelement.js wp-mediaelement.js