CODEWITHSUNDEEP
javascripthtmlvideoresizemediaelement
Moitah
Moitah

Reputation: 63

Resizing a MediaElementjs video that is loaded dynamically

So I have a video, that I load into the page with jQuery's .load(). Here's the website where you can see the problem in the 'vidéos' section : http://guillaumep.com/.

Here's the video tag I have to use :

<video><source src="URLTOVIDEO.mp4" type="video/mp4" />

Here's the code that generates the video HTML right after it's been loaded in my #contentFrame :

$('video').wrap('<div class="videowrapper">')

.attr({ 'style': 'width: 100%; height: 100%;' })
.mediaelementplayer({ success: function (player) { 
    correctVideoSize($(player).parent(4).eq(0)); }
});

Then I have code that actually resizes the video player according to the window's shape, so that the video always shows at it's maximum size while never overflowing the window :

function correctVideoSize(videoContainer) {
    var videoContainerHeight = $(window).height() - 100;
    var videoContainerWidth = $(window).width() * 0.92;
    var videoContainerRatio = videoContainerWidth / videoContainerHeight;
    var videoRatio = videoContainer.width() / videoContainer.height();
    console.log('videoRatio : ' + videoRatio);
    console.log('videoContainerRatio : ' + videoContainerRatio);

    if (!isNaN(videoRatio) && videoContainerRatio < videoRatio)
    {
        videoContainer.height(videoContainerWidth / videoRatio).width(videoContainerWidth);
    }
    else if (!isNaN(videoRatio))
    {
        videoContainer.height(videoContainerHeight).width(videoContainerHeight * videoRatio);
    }

    return videoContainer;
}

Resizing images that way absolutely works, as you can see there : http://guillaumep.com, but for videos I don't understand how, when, what and where I'm supposed to resize. You can see the problem here : http://guillaumep.com/2012/10/22/test-video/.

I tried a lot of différent things, and got the video to correctly resize on the $(window).resize() event, but I guess only because MediaElementJs already hooks into this event and does some magic.

I'm really lost here, thanks for any help !

Upvotes: 4

Views: 1298

Answers (1)

Nico
Nico

Reputation: 917

I'm a bit late here. Found this in my google results as I'm experiencing the same issue as you are. Indeed, the window resize does trigger the right events for de mediaplayer to resize. If you really want an easy solution you could just trigger that event manually like this: (jquery)

$(window).trigger('resize');

I'm gonna look in to the source code and see if I can find a better solution for us. For now, triggering it manually will solve your problem.

EDIT

Well apparently, all the resize bind does is this:

mediaelement.setPlayerSize();
mediaelement.setControlsSize();

That should solve your problem more directly. Good luck!

Upvotes: 5

Related Questions