Getting HTML5 video to scale for responsive designs using mediaelement.js

Question

I'm currently using the mediaelement.js plugin for Wordpress and it seems to work great.

In my attempts to create my first ever responsive CSS design/theme using the @media attribute, I have noticed that the mediaelement.js powered video does not scale, or does not respond to the size of the screen.

Even though I set the CSS, it appears that mediaelement.js actively puts its own inline CSS stylesheets.

With this in mind, is it possible to use mediaelement.js and get the video to scale as per responsiveness.

Thanks

Answer 1

I'm using mediaelementjs too. It is seems to be scaling perfectly for me within responsive designs.

I followed some tips from John Dyer, the MEjs developer at github.

There he points out that you need to include inline style in your video tag

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

He does make a few other pointers, so I would suggest checking out the github page at https://github.com/johndyer/mediaelement