Media Element.JSをレスポンシブ(拡大縮小)対応する方法

IE8からAndroidまでワンソースで対応できちゃう
Media Element.JS
っていう動画プラグインがある。
WordPressの動画再生部分のコアにも採用されてるところからも、
優秀さが伺えるんだけど、
それのレスポンシブ対応に迷ったのでメモ。

記述があったのはこちら
http://coolestguidesontheplanet.com/videodrome/mediaelementjs/

普通に設置して、
縦横指定するところに
style=”width:100%;height:100%;”
width=”100%” height=”100%”
を追加。
これで、縦横幅は親要素依存にできます。
タネがわかれば簡単なのだけど、すごく目鱗だな……!

<video id="my_video_1"  style="width:100%;height:100%;" controls="controls" width="100%" height="100%"
 preload="auto" poster="my_video_poster.png"
 <source src="my_video.mp4" type='video/mp4'>
</video>

投稿者:

ayako0802

フロントエンドエンジニア