JQuery: How to intercept a click event and prevent inner element to receive it?

I've enclosed youtube embedded code inside a div. The div id is outer_viv. I've make the size of the screen relatively small to make the video look like a thumbnail.

<div id = "outer_div">
 <h2>First Leader Aside</h2>
 <p>
    <iframe width="200" height="112" src="https://www.youtube.com/embed/myvideo"
     frameborder="0" allowfullscreen="allowfullscreen"></iframe>
 </p>
</div>

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.

How do I intercept the click event with jquery?

Thanks for helping