Issue videoWidth / videoHeight mediaelement js

Question

I use mediaelement.js and I need to override the width and height of a video element, but it's not working:

<video id="v1" width="960" height="720">
     <source src="video.mp4" type="video/mp4" />
</video>

<script>
  player1 = new MediaElementPlayer('#v1',{ features: [], videoWidth: 1323, videoHeight: 995 });
  player1.play();
 </script>  

I have the container div.mejs-mediaelement at 1323x995, but the video is still at 960x720.

If I do:

<video id="v1" width="100%" height="100%">

It works but not on IE9... IE9 understands width="100" and height="100".

Thanks for your help!

Answer 1

I used this solution:

function scaleToFill(videoTag) {
    var $video = $(videoTag),
        videoRatio = videoTag.videoWidth / videoTag.videoHeight,
        tagRatio = $video.width() / $video.height();
    if (videoRatio < tagRatio) {
        $video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio  + ')')
    } else if (tagRatio < videoRatio) {
        $video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio  + ')')
    }
}

function calc(){
    $("video").each(function(){
      scaleToFill($(this)[0]);
    });
}
calc();

$(window).on('resize', function(){
    calc();
});