jQuery: Exercise 1

Making a Video Player with the DOM API

In this exercise, you'll be turning the below list of linked titles into a list of linked thumbnails, using JavaScript DOM manipulation and the functions from the youtube.JS library (read documentation).

<!doctype html>
    <meta charset="utf-8">
   <title>Video Watcher</title>
    <link rel="stylesheet" type="text/css" href="http://www.teaching-materials.org/common/bootstrap.css">

    <div class="container">
    <div class="row">
      <div class="span12">
        <h2 class="page-header">Best Videos Ever ❤</h1>
    <div class="row">
      <div class="span3">
          <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>

    <script type="text/javascript" src="http://www.teaching-materials.org/common/youtube.js"></script>

Step by Step:

Quick Tip: If you need a refresher on the DOM API, check out slides 1-12 from the DOM Review class here.