How to make MediaElement.js Fluid?

Question

I played with the code and I can not get it to work. I googled, searched on this site, browsing 13 pages, and I still can not find the answer to what I am looking for.

I want the video to start with a certain dimension, and then shrink when the browser is resized (switch from desktop to iPad / iPhone).

I tried to do below, but the video remains the same. It weighs nothing.

<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 do differently?

Answer 1

set the height / width attributes of the original video size for your video node, but keep the style width / height at 100%, as shown in the figure

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

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

Answer 2

Well, you have a certain size (640px 360px) set in the #myVideo div, so the video element inside is 100% of this field. If you delete the pixel sizes - or try changing them to the maximum size, it should be scalable.

Answer 3

It works. Width = "50%" in myvids div is for IE. Without it, the video fills the player incorrectly. Ordering video attributes really matters.

 <div class="myvids" id="viddivap1" width="50%" style="width:100%; position:relative;"> <video class="thevid" width="640" height="360" style="max-width:100%; height:100%;" id="my_video_ap1" preload="auto" autoplay controls="controls" > <source type="video/youtube" src="http://www.youtube.com/watch?v=FAGL9gxhdHM" /> </video> </div>