Tutorial: Sortcode: Agrega videos de Youtube sólo con la Id

Voldemorth Seguir

No recomendado
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
10 Ene 2012
Mensajes
927
Hola a todos, como están?
Este tutorial lo haré medio rápido ya que estoy algo ocupado, aun así como leí en el foro un articulo de como agregar vídeos de esta forma a blogs de blogger solo con el id del mismo (es decir sin toda la perolata de código de embebido que tiene youtube por ejemplo).
En resumidas cuentas en wordpress se puede hacer lo mismo, creando lo que se llama un "shortcode" o código corto, el cual debe cumplir con algunas reglas de sintaxis para funcionar.
Lo primero que haremos es incorporar este codigo a el archivo "functions.php":
HTML:
// Add Shortcode
function youtube_shortcode( $atts ) {

	// Attributes
	extract( shortcode_atts(
		array(
			'id' => '',
			'width' => '640',
			'height' => '360',
		), $atts )
	);

	// Code
	return '<iframe 
                     width="' . $width . '" 
                     height="' . $height . '"
                    src="//www.youtube.com/embed/' . $id . '?rel=0"
                    frameborder="0" allowfullscreen></iframe>;

}
add_shortcode( 'YouTube', 'youtube_shortcode' );

Estudiando un poco este codigo podemos notar que esta formado de 2 partes, una que recibe algunos parámetros y otra que los procesa. Nuestros parametros son:
'id' => '',
'width' => '640',
'height' => '360',​
Que obviamente corresponden a id del vídeo, ancho y alto respectivamente, y donde el ancho y el alto tienen un valor por defecto de 640x360 pixeles, de forma que si queremos podemos pasar a demás de la id el ancho y alto del player, o si no se vera en 640x360px.
La segunda parte es donde se hace la magia, se toman los valores y se los cargan en el código de youtube dinámica mente, es decir se sustituyen las variables id, width y height por los valores recibidos.
Lo importante aquí es que si queremos editar esta función para otros vídeos solo tenemos que cambiar las partes estáticas del código, así pues
para youtube tenemos:

<iframe width="' . $width . '" height="' . $height . '" src="//www.youtube.com/embed/' . $id . '?rel=0" frameborder="0" allowfullscreen></iframe>

Noten que las partes en negrita son las unicas que cambian si comparamos los codigos de mas de un video de youtube.

de igual forma para vimeo sera:
<iframe src="//player.vimeo.com/video/' . $id . '?title=0&amp;byline=0&amp;portrait=0&amp;badge=0"width="' . $width . '" height="' . $height . '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Ahora para mostrar un vídeo en nuestro wordpress bastara con cargar este código:

HTML:
[YouTube id="" width="" height=""]

Donde [YouTube es la etiqueta y id="" width="" height=""] son los parámetros, recuerden que el ancho y largo son opcionales.
Por ultimo pero no menos importante para usar este tutorial con mas de un sitio de vídeos recuerden cambiar el nombre de la funcion "youtube_shortcode", adaptar el código de embebido a cada sitio, y claro renombrar la etiqueta "YouTube" por la etiqueta que mas les guste.

Salu3!
 

Carlos Arreola

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Excelente comerciante!
Suscripción a IA
Desde
6 Abr 2009
Mensajes
11.504
Tutorial aprobado y agregado al listado, se agradece el aporte :)
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba