Dynamic video/image styling using css or html

I can embed a YouTube video clip in my HTML page as开发者_如何学JAVA so;

<div class="videob">    
        <iframe title="YouTube video player" 
        class="youtube-player" type="text/html" 
        width="610" height="390" src=
        "http://www.youtube.com/embed/grh03-NjHzc"
        frameborder="0" allowFullScreen>
        </iframe>
</div>

I apologize if I come across as vague but what I actually want is for the clip to come to the center of the page when clicked and for the background to be dimmed. Similar to what the "Turn Off The Lights" app does in Google chrome. I'd like to do the same for images.

I prefer Shadowbox, as Fancybox tends to cause IE to freeze. You can check it out here

http://www.shadowbox-js.com/

So after you setup shadowbox...

Here's the head:

<link rel="stylesheet" type="text/css" href="includes/shadowbox.css">
<script type="text/javascript" src="includes/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Here's your video:

<a href="http://www.youtube.com/embed/grh03-NjHzc" rel="shadowbox;width=610;height=390;" title="Nelson Mandela's inaugural address">

Cheers!