title: Changing Video on img click
body: <p>I have three videos and thumbnails for them. I'm trying to change the src of the initial video based on which thumbnail is selected.</p>
  <p>My HTML:</p>
  <pre><code>&lt;video id=&quot;trailers&quot;&gt;
              &lt;source src=&quot;vLast.mp4&quot; type=&quot;video/mp4&quot;&gt;
              &lt;source src=&quot;vLast.webm&quot; type=&quot;video/webm&quot;&gt;
  &lt;/video&gt;
  
  &lt;div id=&quot;playlist&quot; class=&quot;animated fadeInRight&quot;&gt;
      &lt;div class=&quot;thumb&quot; id=&quot;tGow&quot;&gt;&lt;img src=&quot;TbGow.jpg&quot; onClick=&quot;changeTrailer()&quot;/&gt;&lt;/div&gt;
      &lt;div class=&quot;thumb&quot; id=&quot;tLast&quot;&gt;&lt;img src=&quot;TbLast.jpg&quot; onClick=&quot;changeTrailer()&quot;/&gt;&lt;/div&gt;
      &lt;div class=&quot;thumb&quot; id=&quot;tTwo&quot;&gt;&lt;img src=&quot;TbTwo.jpg&quot; onClick=&quot;changeTrailer()&quot;/&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My script:</p>
  <pre><code>function changeTrailer(){
      
      var media = document.getElementById('trailers')
      var thumb = document.getElementsByTagName(&quot;img&quot;)
      if(thumb.getAttribute(&quot;src&quot;) == &quot;TbGow.jpg&quot;){
          media.src = &quot;vGow.mp4&quot;;
          media.load();
          media.play();
      }else if (thumb.getAttribute(&quot;src&quot;) == &quot;TbLast.jpg&quot;){
          media.src = &quot;vTwo.mp4&quot;;
          media.load();
          media.play();
      }else if(thumb.getAttribute(&quot;src&quot;) == &quot;TbLast.jpg&quot;){
          media.src = &quot;vLast.mp4&quot;;
          media.load();
          media.play();
      }
  }
  </code></pre>