Imprimir Página - 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

Hola,

Lo cierto es que en el post anterior te di un mal ejemplo. Mas que nada porque "Lightbox2" no esta precisamente desarrollado para vídeos sino para imágenes.. Que se puede adaptar se puede pero no merece la pena.

Como te dije también, hay infinidad de plugins para jQuery que funcionan o están hechos para vídeos tipo youtube. Un ejemplo es prettyPhoto.

Te dejo un ejemplo de como se implementaría.

Código

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Un video cualquiera</title>
   <!-- Incluimos el CSS de prettyPhoto -->
   <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
</head>
 
<body>
   <!-- Incluimos jQuery -->
   <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
   <!-- Incluimos prettyPhoto -->
   <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
   <!-- Indicamos a prettyPhoto que se active cuando encuentra un enlace (a) con el atributo rel="prettyPhoto" -->
   <script type="text/javascript" charset="utf-8">
      $(document).ready(function(){
         $("a[rel^='prettyPhoto']").prettyPhoto();
      });
   </script>
 
   <!-- La prueba y como se implementaria -->
   <a href="http://www.youtube.com/watch?v=ffmnlUL8hOk" rel="prettyPhoto">Un nombre cualquiera.</a>
</body>
</html>

Funciona con Youtube, Vimeo, SWF's, imágenes, iframes y etc etc..

Puedes descargar prettyPhoto desde aquí:

Código

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto

Saludos

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: AmigoCabron en 4 Noviembre 2012, 19:41 pm