title: jQuery -How to detect video bar play button on click and not the video itself
body: <p>This is my html code:</p>
  
  <pre><code>&lt;div class="video_container"&gt;
  &lt;button class="play"&gt;Play&lt;/button&gt;              
  &lt;video controls poster="image.png"&gt;
  &lt;source src="video.mp4" /&gt;
  &lt;img alt="Img" src="image.png" title="Some Image" /&gt;&lt;/video&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>jQuery(document).ready(function ($) {
    // Center Play Button Onclick 
    $('button.play').click(function () {
      var play_button = $(this);
      var video = $(this).parent().find('video').get(0);
         if (video.paused) {
            video.play();
            play_button.hide();         
         } else {
            video.pause();
            play_button.show();
         }
         return false;
      });
  
    // Video Onclick 
    $('video').click(function () {
      var play_button = $(this).parent().find('button.play');
      var video = $(this).get(0);
         if (video.paused ) {
            video.play();
            play_button.hide();   
         } else {
            video.pause();
            play_button.show();
         }
         return false;
    });
  });
  </code></pre>
  
  <p>First of all, I have multiple videos with same classes and inside of it has button with image background in the center. All are working when the button and video itself is clicked which hides the button in the center when the video plays. But what I really wanted is to detect the "play button" onclick inside the "video bar" at the bottom of video. Because when I clicked the play button inside the video bar, the button in the center doesn't hide. I hope you guys could understand what I am trying to say. Thank you in advance.</p>
  
  <p>Demo site: <a href="http://test.stampsize.in/" rel="nofollow">http://test.stampsize.in/</a></p>