So far, we've covered a lot of theory about creating responsive videos. Now it's time to have a little fun! If we look on the Internet, we will see plenty of examples where designers have created sites that display videos full-size in the background when viewing content.
There are plenty of examples online of how to achieve this. We're going to use the jQuery Cover plugin created by Swedish developer Anton Trollbäck, which is available for download from https://github.com/antontrollback/cover. Let's make our video appear in its full size using the following steps:
Firstly, from the code download that accompanies this book, extract a copy of
fullsize.html. It contains some basic markup, which uses the HTML5 video tags to include two videos in MP4 and WebM format along with some text in an overlay.In
fullsize.html, add the following lines immediately below the<title>statement:<link rel="stylesheet" href="css/fullsize.css"> <script src="js...