As with all projects, we need to start somewhere—we could simply double-click on a video and let it play in any application we have installed, that supports the format. However, this isn't what we're here to do; we want to view the content in a browser and set it to resize automatically!
The following steps will show you how to achieve this using videos I've converted from the open source Big Bunny Project at http://www.bigbuckbunny.org:
Let's start by opening a copy of the template file we created earlier in the book, then alter the
<title>tag of our demo, as shown in the following code snippet:<title>Demo: Controlling Video sizes using media queries</title>
In the
<body>tag of our code, go ahead and add the following lines; these reference the different video formats we can use, depending on which browser we're working with:<video controls> <source src="video/bigbuckbunny.mp4" type="video/mp4"> <source src="video...