Exercise: jQuery Events & Animation

In this exercise, you'll add code to the so that you can actually watch the videos on the page.

  1. Either start with your code from the jQuery workshop, or download the starter file.
  2. In the body of your HTML, create a <div> to hold the video player, either below or to the side of the list, and give it an id.
  3. In the script tag that you were working in before, create a thumbnailify() function that takes a single argument.
  4. Move the code that is currently inside your for loop into that thumbnailify() function.
  5. Change the contents of your function so that it uses a single argument, which is a jQuery object that represents an <a>, rather than an array of elements.
  6. Move the for loop so that it occurs after you define thumbnailify()
  7. Call thumbnailify() from inside your for loop.
  8. Make sure your player first works like it did before. Hint: you should only reference an array index from inside of the for loop.
  9. Now, in the thumbnailify() function, add a click listener to the link. We recommend using a named function for the callback (not an anonymous function). Put a console.log inside the callback to make sure it works.
  10. In the click listener callback, you will be using the "create and store, manipulate, inject" pattern to display an embedded video in the DIV you created.
  11. To find out what the code for an embedded Youtube video looks like, go to Youtube.com and find any embed code for a video.
  12. You can use youtube.generateEmbedUrl() from the youtube.js library to generate an embed URL.
  13. Use string concatenation, .html(), or other jQuery method of your choice to assemble and insert the embedded video element.
  14. Check your work! Try all your video links. Is there anything you need to change?
  15. As a bonus, try to make the video watcher <div> fade in using jQuery.

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.