WordPress

Cómo Insertar Vídeos de YouTube Responsivos en WordPress Usando Shortcode

Aunque YouTube facilita la incrustación de un vídeo en tu sitio web, el método no está exento de desventajas: los estilos y las funciones son limitados, la escalabilidad no está habilitada por defecto y el cambio de las presentaciones de vídeo en todo el sitio es problemático. Este artículo presenta un shortcode de WordPress que le permitirá incluir vídeos individuales y listas de reproducción en una entrada o página con facilidad mediante el uso de un shortcode de WordPress.

Ejemplos de inserción en YouTube

Vídeos individuales

Para incrustar un solo vídeo con shortcode, utilice[youtube v="3RyJ127cJR8"]. Prácticamente se acepta cualquier URL de YouTube; nosotros buscaremos el ID del vídeo. Dicho esto, es una buena práctica incluir sólo el ID del vídeo. El resultado es el siguiente:

Para reproducir sólo una parte seleccionada de un vídeo, basta con definir el tiempo de inicio y de finalización en segundos de la siguiente manera: [youtube v="vbxl3hc_pL8" start="121" end="138"]. El resultado es el siguiente:

Se pueden aplicar varias opciones, que se enumeran a continuación como “atributos del shortcode”.

Mostrar una lista de reproducción de vídeos de YouTube

Una lista de reproducción puede ser una lista de reproducción creada por el usuario, los resultados de una búsqueda o las cargas del usuario. Además, puedes proporcionar tu propia lista de valores de ID de vídeo separados por comas.

Para mostrar una lista de reproducción creada por un usuario – en este caso una del canal de Flight – utilizaremos [youtube listtype="playlist" list="PLR6JWLm3S69cmRsglaYYGa7Jy0GDbsI44"]. El resultado:

Mostrar una lista de reproducción personalizada

Una lista de reproducción personalizada incluye una lista separada por comas de cualquier vídeo de su elección. Por ejemplo, [youtube playlist="rE6a7uFJoss,Itjvfy2pBxA,NfQprOcjO3c"]. El resultado:

Si se define un vídeo primario (como [youtube v="kVUy4i130iM playlist="rE6a7uFJoss,Itjvfy2pBxA,NfQprOcjO3c"], el vídeo definido (en este caso, kVUy4i130iMM) se reproducirá antes de su lista de reproducción.

Parámetros de Shortcode

Las siguientes opciones de shortcode están disponibles. Muchas de las descripciones provienen de la página de parámetros del reproductor de Google.

v

Para un vídeo individual, el v, o ID del vídeo, es necesario. Para incrustar un vídeo básico es el único atributo que se requiere.

width

El shortcode está esencialmente listo para usar. La única opción que tendrás que cambiar en la función del shortcode que descargues es el ancho. Esto debe ser ajustado al estilo de la anchura de su contenedor de tu entrada.

height

El height debería dejarse casi siempre en blanco. En su lugar, tenemos una opción HD (verdadero/falso) que escalará automáticamente el vídeo según sea necesario.

autoplay

Si el video está con autoplay="1", el video se reproducirá automáticamente al cargar la página. Es false por defecto.

hd

Por defecto, mostraremos el contenedor de vídeo de pantalla ancha estándar (16:9). Si está incrustando vídeo de definición estándar, utilice hd="0". Este atributo anula la necesidad de especificar una altura.

start

Para iniciar el vídeo en un punto determinado, utilice start="75", donde 75 es el número de segundos desde el inicio del vídeo.

end

Para terminar el vídeo en un punto determinado, utilice end="127", donde 127 es el número de segundos desde el comienzo del vídeo.

listtype

El atributo listtype se utiliza junto con el atributo list que se indica a continuación. El listtype debe establecerse como playlist, search, r user_uploads. La lista de abajo proporciona el valor.

list

El parámetro list junto con el parámetro listType (arriba), identifica el contenido que se cargará en el reproductor. Si el valor del parámetro listType es user_uploads, el valor del parámetro list identifica el canal de YouTube cuyos vídeos subidos se cargarán. Si el valor del parámetro listType es playlist, el valor del parámetro list especifica un ID de lista de reproducción de YouTube. Si se especifican valores para los parámetros list y listType, no es necesario especificar un ID de vídeo. Ten en cuenta que search ya no es compatible.

playlist

Para crear una lista de reproducción personalizada, hay que hacerlo con valores de identificación de vídeo separados por comas, como se indica a continuación:

. El ID puede ser de cualquier cuenta y hacer referencia a cualquier vídeo. Si también especifica un ID de vídeo, ese vídeo se reproducirá primero.

privacy

Utilice privacy="1" para utilizar el dominio www.youtube-nocookie.com. Normalmente no es necesario.

modestbranding

Este parámetro de URL le permite utilizar un reproductor de YouTube que no muestra el logotipo de YouTube. Por defecto no lo mostramos. Utilice modestbranding="0" en su shortcode para habilitar el logo, o alterar la función del shortcode para evitar tener que incluirlo repetidamente.

loop

Para poner en bucle un solo vídeo una y otra vez, utilice loop="1".

controls

controls indica si se muestran los controles del reproductor de vídeo. Si usas controls="0" no se mostrarán los controles del reproductor. Si usas controls="1" los controles se cargan al cargar la página, y si usas controls="2" los controles aparecen con la interacción del usuario. por defecto, controls="1".

rel

Por defecto, nuestro shortcode no mostrará los vídeos relacionados al final de tu vídeo. Si quieres habilitar esta función, utiliza rel="1" o modifica la función del shortcode si quieres habilitar esta función para todas las insersiones. Esta característica ha cambiado desde que se escribió el primer bloque de código; utilizando rel="1" en su shortcode ahora fuerza los videos relacionados de su propio canal – generalmente el comportamiento preferido. Configurar en rel="0" para mostrar vídeos de cualquier canal.

showinfo

Si el valor del parámetro es 0, el reproductor no mostrará información como el título del vídeo y el cargador antes de que el vídeo comience a reproducirse. Activado por defecto.

cc_load_policy

Si se establece cc_load_policy="1" los subtítulos se mostrarán por defecto, incluso si el usuario ha desactivado los subtítulos. El comportamiento por defecto se basa en las preferencias del usuario. Por defecto, el valor es 0 (false).

color

Este parámetro especifica el color que se utilizará en la barra de progreso del vídeo del reproductor para resaltar la cantidad de vídeo que el espectador ya ha visto. Los valores válidos del parámetro son rojo y blanco. Por defecto, el reproductor utiliza el color rojo en la barra de progreso de vídeo. Para utilizar la barra de progreso blanca, utilice color="white" (esto desactiva las opciones de modest branding).

disablekb

Por defecto, los atajos de teclado están desactivados. Para activarlos, utilice disablekb="1" (la barra espaciadora y las flechas controlan la reproducción).

fs

Para desactivar la opción “pantalla completa”, utilice fs="0". La función está activada por defecto.

hl

Puede proporcionar opcionalmente un idioma de interfaz . Si esto fuera necesario, sería mejor hacerlo a través de la función real en lugar de utilizarla en su shortcode en cada ocasión.

iv_load_policy

Si el valor del parámetro es 1, las anotaciones de vídeo se muestran por defecto, mientras que si es 3, las anotaciones de vídeo no se muestran por defecto. Nuestro valor por defecto es 3 (desactivado).

Las opciones que no se han discutido son enablejsapi, origin, and playsinline. Si buscas estas características, no necesitas que te las expliquemos. Puedes encontrar más detalles sobre las opciones de los parámetros del reproductor aquí.

La función Shortcode

Siempre es mejor descargar la función del shortcode en lugar de copiar el texto. Como alternativa, hemos proporcionado un plugin de WordPress que puedes utilizar como cualquier otro.

Copie y pegue la función de WordPress en el archivo functions.php de su tema o, si tiene uno instalado, en su plugin de funciones personalizadas.

function bloggerfusion_embed_yt_player($atts, $content = null) {

$atts = shortcode_atts(array(

'v' => false,
'width' => '560',
'height' => false,
'autoplay' => false,
'hd' => true, /* 16: 9, SD 4:3 */

'start' => false, /* Segundos desde el inicio del vídeo */
'end' => false, /* Finalizar el vídeo a "segundos" del inicio */
'playlist' => false, /* lista separada por comas de los id de vídeo que se reproducirán DESPUÉS del primer vídeo definido */
'list' => false, /* ID de la lista, usado en compañía de listType */
'listtype' => false, /* permitido: playlist, user_uploads */

'rel' => '0', /* Ajuste a 1 para mostrar un vídeo relacionado de cualquier canal, 0 para el suyo propio */
'privacy' => false,
'cc_lang_pref' => 'es',
'cc_load_policy' => '0',
'color' => 'red', /* rojo (por defecto) & blanco :: color de la barra de progreso */
'modestbranding' => '1', /* 0 - mostrar la marca de YouTube */
'playsinline' => '0', /* reproducir en línea o a pantalla completa en un reproductor HTML5 en iOS */
'controls' => '1', /* 0 (sin controles), 1 (controles pre cargado, por defecto), o 2 */
'disablekb' => '0', /* 0 - desactiva los atajos de teclado */
'enablejsapi' => 0, /* 1 permite el control del reproductor mediante IFrame o llamadas a la API de JS */
'fs' => '1', /* 0 desactiva la opción de pantalla completa */
'hl' => 'es', /* Lenguaje de interfaz http://www.loc.gov/standards/iso639-2/php/code_list.php */
'iv_load_policy' => true,
'loop' => false /* 1 - vídeo de bucles */

), $atts);

/* Determinar la altura del vídeo */
if (!$atts['height']) $atts['height'] = ($atts['hd']) ? '56.06%' : '75%';

/* Obtener el ID de vídeo de $v (si es necesario) */
if ($atts['v'] !== false && strpos($atts['v'], 'https') !== false) {
preg_match("#(?<=v=)[a-zA-Z0-9-]+(?=&)|(?<=v\/)[^&\n]+(?=\?)|(?<=embed/)[^&\n]+|(?<=v=)[^&\??n]+|(?<=youtu.be/)[^&\n]+#", $v, $matches);
$v = $matches['0'];
}

$a .= 'origin=' . site_url();
if ($atts['autoplay']) $a .= '&autoplay=1';
$a .= '&rel=' . $atts['rel'];
$a .= '&cc_lang_pref=' . $atts['cc_lang_pref'];
$a .= '&cc_load_policy=' . $atts['cc_load_policy'];
$a .= '&color=' . $atts['color'];
$a .= '&modestbranding=' . $atts['modestbranding'];
$a .= '&playsinline=' . $atts['playsinline'];
$a .= '&controls=' . $atts['controls'];
$a .= '&disablekb=' . $atts['disablekb'];
$a .= '&enablejsapi=' . $atts['enablejsapi'];
if ($atts['start']) $a .= '&start=' . $atts['start'];
if ($atts['end']) $a .= '&end=' . $atts['end'];
$a .= '&fs=' . $atts['fs'];
$a .= '&hl=' . $atts['hl'];
$a .= ($atts['iv_load_policy'] !== false) ? '&hl=1' : '&hl=3';
if ($atts['loop'] !== false) $a .= '&loop=0';
$a .= '&widget_referrer=' . esc_url(get_permalink());

/* Lista de reproducción */
if ($atts['playlist'] !== false || $atts['list'] !== false) {

/* La búsqueda ya no está disponible como listType */
$permitted_listtype = array('playlist', 'user_uploads');

if ($atts['listtype'] !== false && in_array($atts['listtype'], $permitted_listtype) && $atts['list'] !== false) {

$l = (strlen(substr($atts['playlist'], 0, 2)) != 'PL') ? 'PL' . $atts['list'] : $atts['list'];
$a .= '&playlist=' . $atts['playlist'] . '&list=' . $l . '&listType=' . $atts['listtype'];
$atts['v'] = '';

} elseif ($atts['listtype'] !== false && $atts['list'] !== false) {

$l = (strlen(substr($atts['list'], 0, 2)) != 'PL') ? 'PL' . $atts['list'] : $atts['list'];
$a .= '&listType=playlist&list=' . $atts['list'];

} elseif ($atts['playlist'] !== false && (strpos($atts['playlist'], ',') !== false)) {

$a .= '&playlist=' . $atts['playlist'];
}

}

/* Devolución del contenedor de vídeo */
$return = '<div style="position: relative; height: 0; padding-bottom: ' . $atts['height'] . '; margin-bottom: 1px; margin-top: 30px;"><iframe src="https://www.youtube.com/embed/' . $atts['v'] . '?ecver=2&' . $a . '" style="position:absolute; width:100%; height:100%; left:0" width=”642" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>';

return str_replace(array("\r", "\n"), '', $return);
}

add_shortcode('youtube', 'bloggerfusion_embed_yt_player');

Acerca del Autor

Andres

Agregar un Comentario

Clic Aqui para Publicar un Comentario

Publicidad

Síguenos en Facebook