Incrustar vídeos YouTube en WordPress


Todo el mundo conoce YouTube, un sitio web dedicado a servir vídeos que fue fundado en 2005 por  Chad Hurley, Steve Chen y Jawed Karim, aunque desde 2006, por la friolera de 1650 millones de dólares, se convirtió en propiedad de Google. También en la web más famosa de su género, entre varias razones porque presta diversos servicios a distintos públicos-objetivo: para el internauta, es un sitio donde compartir documentales, cursos en vídeo, clips musicales, etc.; para creadores, productores y publicistas, un medio de comunicación de masas portentoso, semejante a lo que han sido durante décadas —y siguen siendo— el cine, la radio y la televisión.

youtube

Pero lo que más nos interesa en este momento, desde el punto de vista del diseño y la publicación web, es que YouTube puede ser también una fuente de contenidos, gracias a que ofrece la posibilidad de incrustar (embed) sus vídeos en nuestro propio sitio, totalmente gratis, y apenas sin esfuerzo.

El procedimiento general

Para conseguir el código HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
necesario, y que permite la reproducción en casi cualquier web,  basta con colocar el puntero sobre el videoclip que estemos visualizando en el sitio de YouTube, pulsar el botón derecho del ratón, y escoger la opción de menú Copy embed code:

Youtube- embed

 

En nuestro portapapeles se habrá guardado algo así:

<iframe 
width="860" 
height="645" 
frameborder="0" 
allowfullscreen="" 
src="https://www.youtube.com/embed/-GEnuQCEeiE">

 

La marca <iframe> es un elemento del lenguaje HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
que permite cargar en un contenedor de nuestra página web no solamente un vídeo, sino todo un sitio externo. El contenedor tendrá las medidas que establezcamos en los atributos correspondientes (width y height), y además de otras muchas propiedades, como puedes ver en el código, es posible especificar si mostrará un borde (frameborder), así como elegir si queremos permitir la reproducción del vídeo a pantalla completa o no (allowfullscreen). Aunque lo cierto es que varios de estos atributos, heredados de HTML4, han desaparecido ya en HTML5, por lo cual no tendrán efecto en sitios creados con esta versión del lenguaje.

Puesto que la marca obtenida está completa y en nuestro portapapeles, el siguiente paso es pegarla en el documento HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
donde queramos que aparezca el vídeo. Resaltamos la parte importante en esta simple plantilla:

<!DOCTYPE html>
<html lang="es">
   <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>Probar cookies de YouTube</title>
   </head>
<body class="main">
       <iframe 
		width="860" 
		height="645" 
		frameborder="0" 
		allowfullscreen="" 
		src="https://www.youtube.com/embed/-GEnuQCEeiE">
</body>
</html>

 

Si copias el código anterior, lo guardas en un archivo llamado pruebavideo.html —o con el nombre que más te guste— y después lo abres en tu navegador, verás un videoclip de Siniestro total. Así de fácil.

Siniestro total

 

WordPress y oEmbed

Quizá no quieres andar editando documentos HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
, y probablemente por eso utilices WordPress para publicar tu web. Si es así, estás de suerte, porque el método para insertar vídeo es todavía más sencillo: solamente necesitas la dirección URL«localizador de recursos uniforme» es un identificador de recursos en una red, que coloquialmente llamamos «dirección web» o «dirección de internet»
Uniform Resource Locator → URL
. Puedes obtenerla también, y de manera semejante a la que hemos descrito antes, en el sitio de YouTube, aunque esta vez mediante el comando Copy video URL  del menú contextual :

Youtube - copiar URL

 

Luego, solo tienes que pegarla en la línea que desees, como muestra la imagen adjunta, en el editor de WordPress:

Insertando la dirección en editor

 

El protocolo oEmbed

Guarda la entrada de la manera habitual. Luego, cuando alguien la visite, WordPress se encargará de convertir dicha dirección en la marca <iframe> correspondiente, para mostrar el vídeo en la página, o un enlace al mismo en el caso de que la incrustación no fuera posible. Para eso cuenta con soporte del protocolo oEmbed y una serie de librerías que hacen todo el trabajo, de modo que el usuario final vea algo parecido a esto:

La entrada con el vídeo

 

El protocolo oEmbed está concebido para insertar recursos de un sitio en otro sin tener que manejar directamente HTMLlenguaje de marcación de hipertexto
HyperText Markup Language
. WordPress lo adoptó en la versión 2.9, y ofrece esta forma sencilla de incrustación para vídeos de YouTube y de Vimeo por defecto, sin tener que hacer nada, porque estos sitios ya están registrados en el sistema. Pegas la dirección del recurso y ya está. ¿Puede haber algo más fácil? 

Para obtener más información sobre el protocolo oEmbed, y una lista de los proveedores que lo soportan, y que por tanto puedes usar en WordPress, visita la siguiente dirección:  

https://codex.wordpress.org/Embeds

Y también en esta otra, por supuesto, de sus desarrolladores:

http://oembed.com/

 

Quizá en la mencionada lista no aparezca algún sitio que conoces, pero que también utiliza el protocolo oEmbed.  No hay problema, porque la función

wp_oembed_add_provider ( $format, $provider, $regex)

te permite añadirlo fácilmente a WordPress, siempre que también conozcas el formato del medio, la dirección URL«localizador de recursos uniforme» es un identificador de recursos en una red, que coloquialmente llamamos «dirección web» o «dirección de internet»
Uniform Resource Locator → URL
y la expresión con que el recurso en cuestión debe cargarse.

Conclusión

Una vez más, WordPress facilita la tarea de publicar contenidos multimedia, sin tener que bregar con marcas o atributos. Y es que gracias al protocolo oEmbed no solamente es posible insertar vídeos, como hemos visto en este artículo, sino también imágenes, galerías, encuestas, etc. Trataremos en futuras entradas de algunas de sus posibilidades. También hablaremos de los inconvenientes que presenta la utilización de medios externos como los vídeos, y buscaremos alguna manera de solucionarlos. Por ejemplo, a la hora de cumplir con la legislación vigente (consulta el artículo Todo sobre la nueva ley de cookies de TreceBits). ¿Sabías que con WordPress también puedes evitar fácilmente las cookie«galleta», pequeño archivo de información que envía un sitio web, y que se almacena en tu navegador
cookie
s que instala YouTube?

Pronto, en este mismo sitio, te diremos cómo. No olvides volver.



3 comentarios a “Incrustar vídeos YouTube en WordPress”

Puedes dejar una respuesta o hacer Trakback para esta entrada.
  1. Admiring the commitment you put into your site and in depth
    information you provide. It’s good to come across a blog every once in a
    while that isn’t the same unwanted rehashed information. Wonderful read!
    I’ve saved your site and I’m including your RSS feeds to my Google account.

  2. Hi there! I know this is somewhat off topic but I was wondering if you knew where I could get a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding
    one? Thanks a lot!

Escribe una respuesta o un comentario

Tu dirección de correo no será publicada.