jQuery: Exercise 3

Making a Video Player in jQuery

In this exercise, you will use jQuery instead of the DOM API to create the same list of links you made in Exercise 1.

Either start with your own solution from Exercise 1 or download it.
First, download the jQuery library from jquery.com and save it into the same directory as your exercise files. Then, add a <script> tag to the page which loads in the jQuery library you just downloaded. The script tag will look something like this:
```
  <script type="text/javascript" src="PUT THE FILENAME HERE"></script>
```
Next, replace the existing code with jQuery - any DOM manipulation can be done with jQuery instead. If you're not sure how to do something with jQuery, google for "X with jQuery" and you will likely find the jQuery docs or StackOverflow questions.

Make sure that you use your browser developer tools to make debugging easier while working on this. Check for errors, and use console.log() to figure out how far your code makes it, and what the values of your variables are along the way.

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Video Watcher</title>
  <link rel="stylesheet" type="text/css" href="lib/bootstrap.css">
 </head>
 <body>

<div class="container">
 
 <div class="row">
   <div class="span12">
    <h2 class="page-header">Best Videos Ever ❤</h1>
   </div>
 </div>
 
 <div class="row">
   <div class="span3">
     <ul>
      <li><a href="https://www.youtube.com/watch?v=TddFnTB_7IM">Trip through the 80s</a></li>
      <li><a href="https://www.youtube.com/watch?v=epUk3T2Kfno">Otters Holding Hands</a></li>
      <li><a href="https://www.youtube.com/watch?v=il2IrgFHfsg">The Ooooh Cat</a></li>
    </ul>
   </div>

   <div class="span9" id="video-watcher">
   </div>
 </div>

</div>

 <script type="text/javascript" src="http://www.teaching-materials.org/common/youtube.js"></script>
 <script type="text/javascript" src="http://www.teaching-materials.org/common/jquery.js"></script>
 <script>
   var videoLinks = $('a');
   for(var i = 0; i < videoLinks.length; i++) {
      var videoLink = $(videoLinks[i]);
      var linkUrl = videoLink.attr('href');
      var thumbnailUrl = youtube.generateThumbnailUrl(linkUrl);
      var thumbnailImg = $('<img>');
      thumbnailImg.attr('src', thumbnailUrl);
      videoLink.append(thumbnailImg);
    });
 </script>
 </body>
</html>