Para este tutorial vamos a usar como muestra el sitio http://videosyletras.com que ocupa de colocar videos de música junto con la letras de las canciones. Vamos a lograr la misma funcionalidad que se muestra en el sitio, pero sin usar plugins.
Vamos a usar dos aproximaciones distintas para logar este efecto. Las ideas podrán combinarse para obtener mas posibilidades.
Primero, vean esta página: http://videosyletras.com/shakira-loca-youtube que nos muestra un vídeo de Shakira. El identificador del vídeo (que se obtiene haciendo doble clic en el área de presentación) es UEr91A_Rewc. Y con este vamos a trabajar.
Usar campos personalizados para insertar videos en WordPress
En la plantilla single.php colocamos este código, ahí donde queramos que aparezca el vídeo:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | <?php if ( get_post_meta($post->ID, 'video', true) ) : ?><div id="autovideo"> <object width="260" height="171"> <param name="movie" value="http://www.youtube-nocookie.com/v/<?php echo get_post_meta($post->ID, 'video', true) ?>?fs=1&hl=es_ES"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube-nocookie.com/v/<?php echo get_post_meta($post->ID, 'video', true) ?>?fs=1&hl=es_ES" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="260" height="171"> </embed> </object></div><?php endif; ?> |
Este código toma el contenido del campo personalizado video y lo usa para genera el video incrustado. La prueba con la que inicia hace que si el campo está vacío o no existe, el código de YouTube no se imprima, con lo que evitamos errores.
Una variación a este código es el siguiente:
1 2 | <img src="http://img.youtube.com/vi/<?php echo get_post_meta($post->ID, 'video', true) ?>/0.jpg" title="portada" alt="portada" width="480" height="360" /><img src="http://img.youtube.com/vi/<?php echo get_post_meta($post->ID, 'video', true) ?>/5.jpg" title="portada" alt="portada" width="130" height="97" /> |
Que nos muestra las miniaturas del vídeo que hayamos seleccionados. El formato es muy simple, la imagen 0.jpg es de tamaño grande de 480×360 px y la 1, 2, 3 etc miden 130×97 px.
Insertar videos de YouTube usando shortcuts
A diferencia del método anterior, el uso de shortcuts nos da mas libertad a la hora de colocar videos. Para esto, debemos colocar el siguiente código en el archivo functions.php de nuestro tema:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | function vTube ($atts, $content = null) ?><div id="autovideo"> <object width="260" height="171"> <param name="movie" value="http://www.youtube-nocookie.com/v/<?php echo $content; ?>?fs=1&hl=es_ES"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="260" height="171"> </embed> </object></div> <?phpadd_shortcode('video', 'vTube'); |
Una variación de este código para generar miniaturas es así:
1 2 3 4 | function imgTube ($attr, $content=null) return '<img src="http://img.youtube.com/vi/'.$content.'/5.jpg" title="portada" alt="portada" width="480" height="360" />'; add_shortcode ('imagen', 'imgTube'); |
Lo que queda es agregar un poco de estilo, pero eso queda a gusto de cada quien.
Hola muy interesante, yo lo hice sacando el coddigo de insercion del video desde la misma pagina de youtube y lo hice dinamico asi como lo hicistes tu pasandole el valor del video solamente, pero no entiendo la parte de miniatura y el 5.jpg de donde lo sacas y que es precisamente lo que hace, puede poner algun ejemplo en funcionamiento please, gracias por compartir conocimiento
me gusta el diseño de tu blog