CODEWITHSUNDEEP
videohtml5-videomediaelement.js
Squrler
Squrler

Reputation: 3514

Mediaelement.js, html5 and flash video: getting height and width to be 100%

I want to make a video appear at 100% width and 100% height of the viewport. I'm using Mediaelement.js for the video, which ensures native playing in Chrome, Safari and IE9, and a Flash fallback for Firefox and IE8.

Problem is, in native playback or Flash playback the video doesn't go all the way to 100% height of the containing div. It leaves spacing at the top and bottom, to account for the aspect ratio of the video.

Check out an example at http://badlands777.com/test

Is is possible to make a video completely fill out the containing div? In the native tag as well as the Flash fallback player?

Upvotes: 2

Views: 919

Answers (1)

nHaskins
nHaskins

Reputation: 827

You need to add a style attribute to your video tag, with height and width set to 100%.

<video style="width: 100%; height: 100%;"

mediaelement.js will transfer the values to the appropriate parts in the output HTML.

Upvotes: 1

Related Questions