title: How to intercept a click event and prevent inner element to receive it?
body: <p>I've enclosed YouTube embedded code inside a div. The div id is <strong>outer_viv</strong>. I've make the size of the screen relatively small to make the video look like a thumbnail.</p>
  
  <pre><code>&lt;div id = "outer_div"&gt;
   &lt;h2&gt;First Leader Aside&lt;/h2&gt;
   &lt;p&gt;
      &lt;iframe width="200" height="112" src="https://www.youtube.com/embed/myvideo"
       frameborder="0" allowfullscreen="allowfullscreen"&gt;&lt;/iframe&gt;
   &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the thumbnail is click, I don't want the video to start playing. I want to intercept the click, add a border to show that the video has been selected and display a bigger screen of the video in the main content section of the page.</p>
  
  <p>How do I intercept the click event with jquery? </p>