Creación de un shortcode para vídeo responsivo

Si te pareces a mi, usarás YouTube para alojar cualquier vídeo que añadas a tu sitio WordPress. Te ahorra tener que preocuparte sobre el navegador o la compatibilidad con los dispositivos, te ahorra espacio en los servidores, y puede ser mucho más fiable.

Además, significa que tus vídeos podrán ser accesibles por los usuarios de YouTube al mismo tiempo que por los visitantes de tu sitio o blog.

Sin embargo, añadir vídeos reproducidos por YouTube tiene dos desventajas:

1. Por defecto, no son responsivos. Los vídeos son contenidos en un elemento <iframe>, y aún con la mejor intención del mundo, no podrás hacer que ninguno de ellos sea responsivo.
2. Si estás desarrollando un sitio para clientes que no saben codificar, esperar que abran la pestaña “Texto” del Editor de entradas y copien un código de incrustación de YouTube podría resultarles demasiado desalentador, o incluso peor, podría ofrecerles una oportunidad para romper el sitio.

En este tutorial te mostraré cómo crear un shortcode que te permita a ti o a tu cliente añadir un vídeo incrustado de YouTuve en la vista “Visual” que haga que ese vídeo sea responsivo.

Lo que necesitarás para completar este tutorial

Para completar este tutorial, necesitarás lo siguiente:

• Una instalación de desarrollo o prueba con WordPress
• Un editor de código
• Un programa de FTP para subir tu plugin (el cual podría estar incorporado a tu editor de código)

Configurar el plugin

Empieza abriendo un nuevo archivo en tu editor de texto, y nómbralo, el mío se llama wptutsplus-responsive-video-shortcode.php, pero tú puedes denominar al tuyo como quieras.

En el archivo, inserta el siguiente código:

1

<?php

2

/*

3

Plugin Name: WpTuts+ Responsive Video Shortcode

4

Plugin URI: https://rachelmccollin.com

5

Description: This plugin provides a shortcode you wrap around the ID of a video in YouTube. The plugin then adds the necessary markup and CSS to make that video responsive. To use it, type [responsive-video]'source'[/responsive-video], where 'source' is the iframe embed code for your video.

6

Version: 1.0

7

Author: Rachel McCollin

8

Author URI: http://rachelmccollin.com

9

License: GPLv2

10

*/

11

?>

Esto configura tu plugin y le indica a WordPress su nombre y versión.

Añadir la función del shortcode

A continuación tienes el texto de apertura, añade la función que creará el shortcode y engánchala al gancho de acción add_shortcode:

1

<?php

2

// register the shortcode to wrap html around the content

3

function wptuts_responsive_video_shortcode( $atts ) {

4

	extract( shortcode_atts( array (

5

		'identifier' => ''

6

	), $atts ) );

7

	return '<div class="wptuts-video-container"><iframe src="//www.youtube.com/embed/' . $identifier . '" height="240" width="320" allowfullscreen="" frameborder="0"></iframe></div>

8

	<!--.wptuts-video-container-->';

9

}

10

add_shortcode ('responsive-video', 'wptuts_responsive_video_shortcode' );

11

?>

Esto creará el shortcode en sí. Veámos a lo que ese shortcode dará salida:

• Un div contenedor con la clase wptuts-video-container, lo cual se usará para añadir el CSS que hará que el vídeo sea responsivo
• Un elemento iframe dentro de ese div contenedor
• El enlace al vídeo de YouTube dentro del código incrustado, con $identifier en el lugar del código único de identificación para el vídeo
• Un atributo de $identifier que el usuario especificará cuando añada el shortcode a una página o entrada del sitio. Esto significa que él o ella no necesitará escribir o copiar todo el código de incrustación

Añadir el CSS para hacer las cosas responsivas

El siguiente paso consiste en añadir los estilos que harán que ese div contenedor sea responsivo. Abre un nuevo archivo en tu editor de código y llámalo style.css. En la nueva hoja de estilos añade lo siguiente:

1

/*

2

stylesheet for use with responsive video shortcode plugin.

3

Provides the CSS that makes the video responsive.

4

*/

5

6

.wptuts-video-container {

7

	position: relative;

8

	padding-bottom: 56.25%;

9

	padding-top: 30px;

10

	height: 0;

11

	overflow: hidden;

12

}

13

14

.wptuts-video-container iframe {

15

	position: absolute;

16

	top:0;

17

	left: 0;

18

	width: 100%;

19

	height: 100%;

20

}

Lo que hace esto es lo siguiente:

• Hace que el div contenedor sea responsivo, usando padding-bottom para definir el ratio de aspecto (en este caso 16:9). La declaración padding-top proporciona el espacio para el borde en la parte superior del vídeo. Usando padding-bottom en lugar de height significa que si el div es redimensionado, mantendrá su ratio de aspecto.
• Añade un posicionamiento absoluto al elemento iframe, asegurando que cubra el espacio tomado por el div contenedor. Esto hace que el vídeo sea responsivo.

Ahora guarda tu hoja de estilos.

Registrar la hoja de estilos en el plugin

El paso final consiste en registrar la hoja de estilos dentro del plugin de manera que este utilice el CSS que acabas de añadir.

Abre el archivo del plugin de nuevo. Aobre el código del shortcode en sí, añade lo siguiente:

1

<?php

2

// Register stylesheet with hook 'wp_enqueue_scripts', which can be used for front end CSS and JavaScript

3

function wptuts_responsive_video_add_stylesheet() {

4

	wp_register_style( 'wptuts_responsive_video_style', plugins_url( 'style.css', __FILE__ ) );

5

	wp_enqueue_style( 'wptuts_responsive_video_style' );

6

}

7

add_action( 'wp_enqueue_scripts', 'wptuts_responsive_video_add_stylesheet' );

8

?>

Esto registra la hoja de estilos y la encola usando wp_enqueue_scripts, lo cual es la forma correcta de añadir hojas de estilo y scripts en WordPress.

Usar el shortcode

Ahora guarda ambos de tus archivos en una carpeta con el nombre de tu plugin, yo estoy llamando a mi carpeta wptutsplus-responsive-video-shortcode. Guarda esto y súbelo a la carpeta de plugins de tu sitio de prueba. Activa el plugin.

Voy a usar un vídeo de Lego Superheroes (sé que hará felices a mis hijos). Su identificador único es O56p5nOYNHo, el cual puedes copiar de la URL mientras visualizas el vídeo en el sitio de YouTube. En un nuevo o existente entrada o página, añade el shortcode de la siguiente manera:

[responsive-video identifier="O56p5nOYNHo"]

Guarda la entrada y visualízala. Descubrirás que el vídeo se reproduce, como se muestra la captura de pantalla:

Ahora intenta redimensionar la ventana de tu navegador, o visualiza la entrada en un dispositivo móvil. El vídeo se redimensionará automáticamente:

De manera que ahora erres capaz de reproducir cualquier vídeo de YouTube que quieras en tu sitio desviándote del Editor visual y sin preocuparte sobre los usuarios que los visualicen desde distintos dispositivos.