title: Creating clickable video thumbnails that load video on the same page above
body: <p>I'm trying to make a video gallery of all my youtube videos for my website. So far I have created a grid of thumbnails of the video, and above it I have an iframe of my most recent video. I want to make it so that when the user clicks on one of the thumbnails below the main video, that the most recent video iframe will be replaced by that video. I'm not quite sure how to do that. </p>
  
  <p>Example of what I'm trying to make:</p>
  
  <p><a href="http://tubepress.com/demo/" rel="nofollow">http://tubepress.com/demo/</a></p>
  
  <p>here is my code so far:</p>
  
  <pre><code>&lt;section class="second clearfix"&gt;
  &lt;header&gt;
      &lt;h1&gt;Video Academy&lt;/h1&gt;
  &lt;/header&gt;
  
  
  &lt;h2&gt;Most recent video here&lt;/h2&gt;
  &lt;p&gt;Description of video&lt;/p&gt;
  
  &lt;div class="embed-responsive embed-responsive-16by9 mbl"&gt;
      &lt;iframe class="embed-responsive-item" src="//www.youtube.com/embed/ZuGHts631vM" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;article class="video"&gt;
      &lt;figure&gt;
          &lt;a class ="thumbnails" data-video="www.youtube.com/embed/zH3ZohGnjcg"&gt;&lt;img class="videoThumb" src="http://i1.ytimg.com/vi/zH3ZohGnjcg/mqdefault.jpg"&gt;&lt;/a&gt;
      &lt;/figure&gt;
      &lt;h3 class="videoTitle"&gt;video1&lt;/h3&gt;
      &lt;p class ="time"&gt;6:13&lt;/p&gt;
  
  &lt;/article&gt;
  
  &lt;article class="video"&gt;
      &lt;figure&gt;
          &lt;a class="thumbnails" data-video="www.youtube.com/embed/_ZSefvtdYiY"&gt;&lt;img class="videoThumb" src="https://secure-b.vimeocdn.com/ts/178/010/178010767_295.jpg"&gt;&lt;/a&gt;
      &lt;/figure&gt;
      &lt;h3 class="videoTitle"&gt;video 2&lt;/h3&gt;
      &lt;p class ="time"&gt;4:36&lt;/p&gt;
  
  &lt;/article&gt;
  
  &lt;article class="video"&gt;
      &lt;figure&gt;
          &lt;a class="thumbnails" data-video="www.youtube.com/embed/_ZSefvtdYiY"&gt;&lt;img class="videoThumb" src="http://i1.ytimg.com/vi/_ZSefvtdYiY/mqdefault.jpg"&gt;&lt;/a&gt;
      &lt;/figure&gt;
      &lt;h3 class="videoTitle"&gt;video 3&lt;/h3&gt;
      &lt;p class ="time"&gt;15:23&lt;/p&gt;
  
  &lt;/article&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
  $(document).ready(function() {
      $(".hoveritem").click(function() {
          var change = $(this).find('.videoThumb').data('video');
  
          $(".embed-responsive-item").attr('src', change);
  
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>I tried using javascript, but right now as my code is now clicking a thumbnail does nothing. I feel like I'm close, can anyone help me solve this? </p>