Exercise: jQuery Plugins

In this exercise, you'll use a jquery plugin to make your watcher more colorful.

Either start with your code from the events exercise, or download this starter file.
Include the funText jQuery plugin on your page. You can reference the JS from http://teaching-materials.org/jquery2/exercises/jquery.funtext.js.
Use funText on your header, with a large shadow. Check the docs to see how to use it.
Now use funText on each of your links, with smaller shadows.
Wasn't that fun??

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="http://www.teaching-materials.org/common/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 type="text/javascript" src="http://teaching-materials.org/jquery2/exercises/jquery.funtext.js"></script>
 <script>
$('h2').funText(10, 'candy');

var thumbnailify = function(videoLink) {
  var linkUrl = videoLink.attr('href');
  var thumbnailUrl = youtube.generateThumbnailUrl(linkUrl);
  var thumbnailImg = $('<img>');
  thumbnailImg.attr('src', thumbnailUrl);
  videoLink.append(thumbnailImg);
  videoLink.funText(10, 'candy');

  videoLink.on('click', function(e) {
      e.preventDefault();
      var videoEmbed = $('<iframe></iframe>');
      videoEmbed.attr('src', youtube.generateEmbedUrl(linkUrl));
      videoEmbed.attr('width', 560);
      videoEmbed.attr('height', 315);
      var videoWatcher = $('#video-watcher');
      videoWatcher.hide();
      videoWatcher.html(videoEmbed);
      videoWatcher.fadeIn();
  });
};

var videoLinks = $('a');
for (var i = 0; i < videoLinks.length; i++) {
  var videoLink = $(videoLinks[i]);
  thumbnailify(videoLink);
}
 </script>
 </body>
</html>