It goes without saying that part of responsive design is the need to produce content that will work on mobile devices; otherwise it wouldn't be responsive! We could spend lots of time trying to develop something from the ground up, but there is little point in doing so. Others have already produced players that work on a desktop.
With a little extra effort, we can make the players responsive. Thankfully, Neil Gee of the Coolest Guides on the Planet site has already done the hard work for us. Let's take a look at one example player to see how he has made it responsive; we'll use VideoJS for the purposes of our demo. Perform the following steps for this demo:
We'll start by extracting the
playerfolder from the code download that accompanies this book and save it to our project folder. It contains a working example of the video player, already configured for use. We'll add the necessary changes to make it responsive.In
player.html, modify the links to the CSS...