title: A simple play button for YouTube with JQuery
body: <p>I want 2 simple buttons to play and stop a YouTube video. I tried something like this with jQuery and doesn't work.</p>
  
  <ol>
  <li>Can anyone help me with a simple and clean solution to do a play
  button for a YouTube video?   </li>
  <li>Can I hide  the video in order to
  just hear the sound?</li>
  </ol>
  
  <p><a href="http://codepen.io/anon/pen/Carwu" rel="nofollow">http://codepen.io/anon/pen/Carwu</a><br>
  <a href="http://jsfiddle.net/8kN6Z/34/" rel="nofollow">http://jsfiddle.net/8kN6Z/34/</a></p>
  
  <pre><code>$(function(){
  
    $("#video").hide();          
    $("#escolta").click(function() {
      video.playVideo();
      //$("#video").playVideo();
      //$("#video").trigger('play');
      //$(".player").playVideo()
  
      });
  
    $("#pausa").click(function() {
      video.stopVideo();
      //$("#video").trigger('pause');
    });
  
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#escolta,#pausa{ font-family: Tahoma;letter-spacing:1px;font-size:11px;color: #666;width: 80px;text-align: center;height: 20px;line-height: 20px;background-color: #ccc;cursor: pointer;}
  #escolta {position:absolute;top: 20px;left:20px;}
  #pausa{position: absolute;top:20px;left: 150px;}​
  #pausa{position: absolute;top:20px;left: 150px;}
  #video{position:absolute;top:100px;left:20px;}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="escolta"&gt;escolta&lt;/div&gt;
  &lt;div id="pausa"&gt;pausa&lt;/div&gt;
  
  &lt;iframe id="video" width="640" height="360" src="http://www.youtube.com/embed/4G1mundpq-Q?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  </code></pre>