How to Make MediaElement.js Fluid?

Question

I've been playing around with the code and I can't seem to get this to work. I've googled, searched on this site looking through 13 pages and I still can't find the answer to what I'm looking for.

I want to have a video start out with a specific dimension and then scale down as I resize the browser (going from desktop to iPad/iPhone).

I've tried doing the below, but the video stays the same. Nothing scales.

<div id="myVideo" style="width:640px; height:360px">
    <video id="player1" width="100%" height="100%" style="width:100%; height:100%;">
        <!-- Pseudo HTML5 -->
        <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
    </video>
</div>

What should I be doing differently?

Answer 1

set your video node's height/width attributes to the original video size, but keep the style width/height at 100% like this

<video id="player1" width="640px" height="360px" style="width:100%; height:100%;">

then resize your myVideo div as necessary and mejs should respond as expected