最近看到了Vedio.js更新到了5.4.4，想說就來用看看，之前設定的都不太適用，研究了一下怎麼設定，才能讓影片的寬度自動隨著視窗改變。
新版的Vedio.js不能設定widht=”auto”，一開始設定width=”100%”，也無法讓影片的寬度在父元素裡達到最寬。
利用jquery去自動設定，width=”100px”寬度先設定一個質，效果也不佳，因為他會先載入一個寬度100px，再調整寬度，畫面不是很好看，而且用手機看會常發生影片載入錯誤的問題
後來我在官網找到了最好的解答，設定如下
<video id="my_video_1" class="video-js vjs-default-skin" width="100%" height="auto"
controls data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }'>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
</video>
寬度可以設定100%，高度設定auto，在data-setup設定aspectRatio，可以完美讓影片呈現最好的比例，一般影片常用比例可以參考維基百科
更多設定與使用可參考官方網站：http://videojs.com/