title: Changing the video playing on Youtube Embedded Player
body: <p>I know this is a repeated question. I basically need to make the youtube videos play on an embedded Youtube player on the site when clicking on the hyperlinks(containing links to Youtube videos). I found some answer here <a href="https://stackoverflow.com/a/690018/524811">https://stackoverflow.com/a/690018/524811</a> but I couldn't get it to work as I'm very new to Javascript. Hope you can assist. Here's my code. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; Sample Page &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt; 
      $(document).ready( function(){
          $(".button").click(function() {
          console.log($(this).find("a").attr("href"));
          $("#MOVIE").html(play($(this).find("a").attr("href"))); 
          return false; 
          });
      });
  &lt;/script&gt;
  
  &lt;object width="420" height="315"&gt;&lt;param name="MOVIE" value="http://www.youtube.com/v/HsQIoPyfQzM?version=3&amp;amp;hl=en_US"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"&gt;&lt;/param&gt;&lt;param name="allowscriptaccess" value="always"&gt;&lt;/param&gt;&lt;embed src="http://www.youtube.com/v/HsQIoPyfQzM?version=3&amp;amp;hl=en_US" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"&gt;&lt;/embed&gt;&lt;/object&gt;
  &lt;/br&gt;&lt;/br&gt;
  &lt;li class="button"&gt;&lt;a href="sPvqNMb4StI"&gt;Video 1&lt;/a&gt;&lt;/li&gt;
  &lt;a href="http://youtu.be/sPvqNMb4StI"&gt; THIS IS FIRST Video Link &lt;/a&gt;&lt;/br&gt;&lt;/br&gt;
  &lt;a href="http://youtu.be/w7_Ccu21QVs"&gt; THIS IS SECOND Video Link &lt;/a&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>