[教學]videojs的RWD設定

videojs 的官方文件網站實在是有點掉漆。。。

還好google大神一如往常的是我們的好朋友！(實際上是網友們的強大啦）
原文請參考https://coolestguidesontheplanet.com/videodrome/videojs/

只要在videojs的 html組成加上vjs-16-9 or vjs-4-3

<video id="myvideo" class="video-js vjs-default-skin vjs-16-9" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
 <source src="my_video.mp4" type='video/mp4'>
</video>

本來在手機版都會破版的情況就會改善了！

或是直接在data-setup中設定fluid:true也可以

<video id="myvideo" class="video-js vjs-default-skin vjs-16-9" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{fluid:true}">
 <source src="my_video.mp4" type='video/mp4'>
</video>

然後追加，預設vidojs的播放按鈕是出現在左上角，如果想要改在中間的呢？
在class中加上vjs-big-play-centered

<video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls
 preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
 <source src="my_video.mp4" type='video/mp4'>
</video>