For the purpose of our exercises in this chapter, we'll be using similar markup throughout; it is worth saving the following code as a template file to help you complete each exercise:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>XXXXXXXXXX</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> <link href="css/XXXXXXXX.css" rel="stylesheet"> </head> <body> </body> </html>
Now that we have our groundwork prepared, let's begin our journey into working with responsive video, with a look first at the formats available for use.
We will also be using various videos from the Big Buck Bunny Project by the Blender Foundation, namely the 852 x 480 and 1280 x 720 formats; you can download these from http://www.bigbuckbunny.org/index.php/download/.
Note
The videos used throughout this project are copyright © 2008, Blender Foundation, available at www.bigbuckbunny...