Ayuda videos youtube como facebook

Bueno vi el tema de los videos de youtube como facebook que tambien me interesaba a mi y bueno he mirado el jquery ese del lightbox y editando el codigo he acabado con esto:

Código:

<!doctype html>
<html lang="en-us">
<head>

	<meta charset="utf-8">
	<title>Lightbox 2</title>

	<meta name="description" lang="en" content="Lightbox 2 is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." />
  <meta name="author" content="Lokesh Dhakar">

  <meta name="viewport" content="width=device-width">

	<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" />	
	<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

  <link href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700' rel='stylesheet' type='text/css'>

</head>
<body>
<div id="sidebar">
	<div class="section" id="example">


	<h2>LQSA TEMPORADA 1</h2>

	<h3>1x01 MIRADOR DE MONTEPINAR</h3>
  <div class="imageRow">
  	<div class="single">
  		<a href="images/examples/1x01.avi" rel="lightbox"><img src="images/examples/1x01.avi" alt="" /></a>
  	</div>
  </div>

</div><!-- end #content -->

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>

<script>
  jQuery(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });

      $('.showOlderChanges').on('click', function(e){
        $('.changelog .old').slideDown('slow');
        $(this).fadeOut();
        e.preventDefault();
      })
  });

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2196019-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>

como veis lo que quiero poner es un video, no una foto, que tendria que modificar del codigo?

puede ser esto de: ''imagerow"?

Código:

	<h3>1x01 MIRADOR DE MONTEPINAR</h3>
  <div class="imageRow"
  	<div class="single">
  		<a href="images/examples/1x01.avi" rel="lightbox"><img src="images/examples/1x01.avi" alt="" /></a>
  	</div>
  </div>

gracias.

pd(los videos se me quedan cargando y no se abren.)-

otra cosa, como podria poner para abrir los videos de youtube y no de mi pc , ya que de mi pc habria que subirlos al hosting o esto tambien y imposible. xd

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Un video cualquiera</title>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
</head>
<body>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
<a href="http://www.youtube.com/watch?v=ffmnlUL8hOk" rel="prettyPhoto">Un nombre cualquiera.</a>
</body>
</html>