To scale a VideoJS video to fit any browser, tablet or mobile device for responsive design you need to change some of the video code and a snippet of CSS.
Initial Set Up
To kick start VideoJS you need to include as a minimum the Javascript and CSS files required, you can host your own or use VideoJS CDN hosted copies, add these in the <head></head> of your document.
<link href="vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet"> <script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
Or download the files from VideoJS from the above link and host the relevant video-js CSS and JS files and reference in your document both video-js.min.css and video.min.js
The next thing is to get your video code, which you can get generated at VFE, at the most you need an mp4 as source file and non mp4 browsers will fallback to Flash, if you have the time and inclination then also providing a WebM file will playback the video in HTML in Firefox and Opera, example of code is:
<video id="example_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
</video>
Below is the full code suggested by VideoJS with the other file formats declared
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
If you do use other code generators the key thing to make VideoJS control the video is to make sure you include the VideoJS CSS classes and data-setup attribute as highlighted in the above example.
Setting It Up For Responsive Design
Place the video html markup code on your page, in this page example the code is placed in a container div div.videocontent has 2 CSS declarations for width, it has a width:80% and a max-width:640px.
It has the main width set to 80% as then it will keep it's width in proportion to its parent container when scaling, you need to find the percentage figure that works in your design, in this example the parent container is the div.wrapper.
I also don't want the video displayed any wider than 640px, so that's why the max-width is set to 640px.
So the html markup is
<div class="wrapper"> <div class="videocontent"> <video id="myvideo" class="video-js"..........</video> </div> </div>
In the Video HTML MarkUp add a new class either vjs-16-9 or vjs-4-3 depending on your video aspect
<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>
Or you can add it via the data set up like so...
data-setup='{"fluid": true}'
Centering the Play Button with CSS in VideoJS
Just add vjs-big-play-centered as a class in the main video element.
<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>
VideoJS for WordPress
VideoJS has a great plugin for WordPress and a click of a button allows for responsive scaling for different viewports
Below are some plugin extensions for the main CMS systems.