Как сделать MediaElement.js Fluid?

Question

Я играл с кодом и не могу заставить его работать. Я гуглил, искал на этом сайте, просматривая 13 страниц, и я все еще не могу найти ответ на то, что я ищу.

Я хочу, чтобы видео начиналось с определенного размера, а затем уменьшалось при изменении размера браузера (переходя с настольного компьютера на iPad / iPhone).

Я пытался сделать ниже, но видео остается прежним. Ничего не масштабируется.

<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>

Что я должен делать по-другому?

Answer 1

Установите атрибуты высоты / ширины вашего видео узла в исходный размер видео, но сохраняйте ширину / высоту стиля на 100%, как это

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

затем измените размер вашего div myVideo по мере необходимости, и mejs должен ответить, как ожидалось

Answer 2

Это работает. Ширина = "50%" в myvids div есть для IE. Без этого видео не сможет правильно заполнить плеер. Порядок атрибутов видео действительно имеет значение.

<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>

Answer 3

Что ж, у вас есть определенный размер (640px 360px), установленный в div #myVideo, поэтому элемент видео внутри составляет 100% от этого поля. Если вы удалите размеры в пикселях - или попробуйте изменить их до максимума - это должно быть масштабируемым.