Advertisement
  1. Code
  2. WordPress

Cómo utilizar el plugin de WordPress para la reproducción de playlists responsivas de vídeo de YouTube

by
Read Time:8 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este artículo, voy a revisar el plugin WordPress Responsive YouTube Playlist Video Player, que te permite integrar un reproductor de vídeo capaz de reproducir listas de reproducción de YouTube sin problemas.

Para los sitios web que tienen gran cantidad de contenido de streaming de vídeo, es importante que organicen este de una manera que resulte atractiva e intuitiva para los usuarios finales. Además, debería formar parte de su estrategia publicitaria. Sobre todo, si estás buscando una mejor manera de representar tu contenido de nicho de YouTube, ¡estás en el lugar correcto!

Cuando se trata de incrustar contenido de YouTube, existen miles de plugins y scripts gratuitos disponibles online. También encontrarás opciones comerciales que proporcionan funciones listas para usar de inmediato y soporte extendido. En el caso de las opciones comerciales, también debes esperar código de calidad, correcciones de errores y periódicas mejoras.

Hoy, vamos a explorar uno de los plugins más populares disponibles en CodeCanyon: WordPress Responsive YouTube Playlist Video Player. Te permite incrustar tu contenido de YouTube de diferentes maneras, ya sea como una lista de reproducción, un canal o un solo vídeo. Además, viene con una interfaz diseñada a medida en lugar de la interfaz predeterminada de YouTube.

Vamos a repasar rápidamente las características más importantes que trae WordPress Responsive YouTube Playlist Video Player:

  • soporte de la lista de reproducción de YouTube, lista de reproducción de canales o un único vídeo
  • responsivo con cambio de tamaño inteligente
  • personalización de la interfaz
  • última API v3 de datos de YouTube
  • Paginación basada en AJAX con un número ilimitado de vídeos
  • diseños horizontales y verticales
  • y mucho más

Este plugin proporciona una gran cantidad de útiles características que te permiten incrustar tu contenido de YouTube sin esfuerzo.

Nuestra agenda

Hay diferentes maneras de usar este plugin y personalizar su salida. Aunque en este artículo, vamos a crear un completo reproductor horizontal de YouTube mediante la inserción de una lista de reproducción de YouTube en base al id.

El resultado de nuestro proceso se verá así:

Completed YouTube video playerCompleted YouTube video playerCompleted YouTube video player

A lo largo de este tutorial, exploraremos diferentes aspectos de este plugin mientras nos acercamos a nuestro objetivo de crear un reproductor de lista de reproducción de vídeo de YouTube. En la siguiente sección, te mostraré cómo descargar e instalar este plugin.

Instalar y registrar tu propia clave de API de YouTube

En esta sección, verás cómo instalar y configurar el plugin WordPress Responsive YouTube Playlist Video Player una vez lo hayas comprado y descargado de CodeCanyon. En este tutorial, he utilizado WordPress 5.2.3, y la versión del plugin es la 1.11.0. Te recomiendo que instales el plugin si quieres seguir este artículo.

El reproductor utiliza la API de datos V3 de YouTube y para utilizar la API necesitarás una clave. Si no registras tu propia clave de API privada, se utilizará la clave predeterminada. Sin embargo, la clave predeterminada la usan muchos otros usuarios que no han introducido su propia clave y la API tiene un número limitado de solicitudes que puede realizar por clave. Así que siempre es una buena idea tener tu propia clave para asegurarte de que no tenga lugar ninguna interrupción en el caso de que tengas un sitio web de alto tráfico.

Si no sabes cómo registrar la clave de la API de YouTube, el plugin proporciona una buena guía que lo explica en detalle. Cuando accedas a la página principal del plugin, en la parte de administración, existe un mensaje que te solicita que introduzcas tu propia clave de API. Haz clic en el botón REGISTER KEY (registrar clave) para abrir la guía. Sigue las instrucciones de la guía y obtén tu clave.

Register Key MessageRegister Key MessageRegister Key Message

Una vez obtengas tu clave de API, sólo tienes que introducirla en la sección GENERAL SETTINGS (ajustes generales) del plugin como se muestra en la siguiente captura de pantalla.

General settings - Register KeyGeneral settings - Register KeyGeneral settings - Register Key

En la siguiente sección, vamos a ver una a una las diferentes secciones de configuración que proporciona este plugin.

Opciones de configuración del plugin

En esta sección, veremos rápidamente las diferentes opciones de configuración proporcionadas por el plugin WordPress Responsive YouTube Playlist Video Player.

Una vez hayas instalado este plugin, podrás acceder a él haciendo clic en el enlace de YouTube de la barra lateral izquierda.

Ajustes generales

En esta sección, puedes configurar opciones generales relacionadas con la paginación, la reproducción automática y el RGPD. Y como hemos comentado anteriormente, en esta sección puedes registrar tu clave de la API de YouTube.

Apariencia

Como su nombre indica, encontrarás ajustes relacionados con los aspectos visuales de tu reproductor en esta sección. Un par de ajustes importantes incluyen el diseño de la lista de reproducción, el ancho del reproductor, la pantalla HD y algunos ajustes relacionados con el texto.

Controles

Cuando quieras personalizar un reproductor, es importante que puedas elegir entre diferentes controles para el mismo. Esta sección te permite ocultar o mostrar diferentes controles de reproducción según sean tus necesidades.

Colores

Esta sección te permite configurar los colores de casi todos y cada uno de los controles del reproductor.

Así que esta ha sido una breve introducción de las opciones de configuración proporcionadas por este plugin. En la siguiente sección, crearemos un completo reproductor de YouTube horizontal mediante la inserción de una lista de reproducción de YouTube en base su id.

Crear un reproductor de YouTube con un diseño de lista de reproducción horizontal

Las listas de reproducción de YouTube pueden añadirse a tus entradas o páginas mediante el botón de shortcode del editor, como se muestra en la siguiente captura de pantalla:

Embed ButtonEmbed ButtonEmbed Button

Al hacer clic en este botón, se abre la ventana emergente como muestra la siguiente captura de pantalla.

Embed Button PopupEmbed Button PopupEmbed Button Popup

Como puedes ver, existen diferentes formas de añadir tu contenido de YouTube a tu sitio. En nuestro caso, como vamos a incrustar la lista de reproducción de YouTube, usaremos la primera opción: YouTube Playlist. Para incrustar la lista de reproducción de YouTube necesitarás una URL de lista de reproducción que puedes obtener fácilmente desde la página de tu canal de YouTube. Por supuesto, si aún no has creado ninguna lista de reproducción, primero tendrás que crearla. En cualquier caso, debes finalizar con una URL de lista de reproducción similar a https://www.youtube.com/playlist?list-YOUR_PLAYLIST_ID.

Una vez obtengas la URL de tu lista de reproducción, insertala en el campo YouTube Playlist como se muestra en la siguiente captura de pantalla y haz clic en el botón INSERT (insertar).

Insert Playlist URLInsert Playlist URLInsert Playlist URL

Tu shortcode se generará y se añadirá a tu página o entrada. En mi caso, he creado una nueva página. El shortcode debe tener el siguiente aspecto:

Sigue adelante y publica la página para ver qué aspecto tiene en el front-end.

Demo without CustomizationDemo without CustomizationDemo without Customization

Así que este es el aspecto de la vista predeterminada. El vídeo principal está en el lado izquierdo y los otros videos de la lista de reproducción están en la barra lateral derecha. Puedes hacer clic en cualquiera de ellos para reproducirlo. En la terminología de este plugin, este es el tipo de lista de reproducción vertical.

En nuestro caso, queremos mostrar horizontalmente en la lista de reproducción los otros vídeos. Puedes controlar este diseño proporcionando el parámetro playlist_type en el código de inserción. De hecho, este plugin proporciona gran cantidad de opciones de personalización a través del shortcode que te permite controlar diferentes aspectos del reproductor de YouTube. No es posible explicar todas las opciones, pero resaltaremos las que necesarias para nuestro caso de uso.

En primer lugar, vamos a añadir el parámetro playlist_type como se muestra en el siguiente fragmento de código.

A continuación, queremos asegurarnos de que el reproductor sea responsivo, esto se hace mediante el parámetro width_type.

A continuación, queremos asegurarnos de que la calidad del vídeo sea HD (alta definición) y de que el logotipo de YouTube quede oculto.

Los ajustes que hemos hecho hasta ahora están específicamente relacionados con la personalización de los controles del reproductor. De alguna manera, siento que también necesitamos cambiar el color de algunos controles para que sean más intuitivos. Así que vamos a modificar un par de ajustes de color en YouTube > COLORES.

Cuando se trata de cambiar el color, este plugin te permite cambiar los colores de diferentes controles. En mi caso, he intentado cambiar los colores como se muestra en la siguiente captura de pantalla. Por supuesto, tú puedes experimentar por tu cuenta para encontrar un tema de color que funcione bien para tu sitio.

Color ChangesColor ChangesColor Changes

Tras todos los cambios que hemos realizado hasta ahora, el reproductor debería tener el siguiente aspecto:

Customized Player DemoCustomized Player DemoCustomized Player Demo

Como puedes ver, hay opciones de personalización para todos y cada uno de los aspectos del reproductor. En esta entrada, hemos incrustado una lista de reproducción de YouTube, pero también puedes incrustar un canal o un único vídeo. ¡Te lo dejo a ti como ejercicio! Por supuesto, siempre puedes contactar conmigo a través de la sección de comentarios en caso de que tengas alguna duda.

Otros posibles usos

En este tutorial, hemos visto cómo puedes añadir un reproductor para una lista de reproducción de YouTube en tu sitio WordPress. Como hemos comentado antes, el plugin WordPress Responsive YouTube Playlist Video Player también es capaz de reproducir diferentes tipos de contenido de YouTube. Además se puede utilizar para integrar lo siguiente:

  • Canales de YouTube
  • Usuarios de YouTube
  • Videos individuales de YouTube
  • Múltiples vídeos de YouTube usando sus identificadores separados por comas

El siguiente paso: Otros scripts de medios para WordPress

Si estás buscando otros scripts multimedia de WordPress que puedas usar de inmediato, te recomiendo que consultes los siguientes scripts que están disponibles a un bajo coste.

Conclusión

Hoy, he aprovechado la oportunidad para presentar el plugin WordPress Responsive YouTube Playlist Video Player disponible en CodeCanyon. Es un plugin comercial de reproducción multimedia que te permite incrustar diferentes tipos de contenido de YouTube sin esfuerzo. Además, también te permite personalizar el aspecto del reproductor según tus necesidades.

Espero que hayas disfrutado de este artículo, ¡y no dudes en publicar tus ideas a través de la siguiente feed de comentarios!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.