Vídeo en WordPress: Guía completa para incrustar vídeos y personalizar el reproductor

Si hay algo fácil en WordPress es incrustar vídeos, pero además de lo sencillo que es también se puede personalizar el reproductor de muchas maneras, así que vamos a ver todas las posibilidades que tenemos.

Incrustar vídeo en WordPress con oEmbed

El modo más rápido, con diferencia, de incrustar un vídeo en una entrada o página de tu WordPress es copiar la URL del vídeo a mostrar y pegarla en tu editor.

WordPress convertirá automáticamente la URL en el reproductor, adaptándose al tipo de vídeo que sea (YouTube, Vimeo, vídeo local, etc).

La lista de servicios compatibles con esta funcionalidad es enorme.

En los siguientes vídeos puedes ver lo fácil que es insertar un vídeo de este modo, tanto en el editor clásico como en el de bloques.

Como has podido ver, el editor de bloques convierte el enlace automáticamente en un bloque – en este caso – de YouTube. Si la URL fuese de otro servicio también lo detecta y convierte automáticamente.

Solo tienes que copiar previamente la URL de la página que muestre el vídeo en el servicio correspondiente (Vimeo, YouTube, DailyMotion, etc.). Luego la pegas en el editor como se ve en los vídeos de arriba y ya está.

El código HTML resultante en el editor de bloques es el siguiente:

Por otra parte, en el editor clásico, si pasas a la pestaña HTML solo verás la URL del vídeo tal cual la pegaste:

https://youtu.be/4h7YtxuYP_8

Eso sí, en ambos casos WordPress los mostrará en tu web con el reproductor HTML5 incluido por defecto.

Los bloques de «incrustados»

Además de esta técnica tan sencilla, si lo deseas, también puedes usar el editor de bloques para incrustarlos.

Aunque es un proceso más lento, y no aporta nada a simplemente pegar la URL, así que casi nadie lo usa una vez descubre que el editor de bloques convierte automáticamente las URLs a bloques de incrustados.

No obstante en el siguiente vídeo te muestro como se haría de dos modos:

  1. Eligiendo el bloque incrustado en cuestión (en el ejemplo YouTube)
  2. Eligiendo el bloque incrustado genérico (con mismo resultado)

Habrás visto que en ambos casos el resultado es el mismo, y en ambos se tarda más que simplemente pegando la URL.

El shortcode

embed

Otro modo de incrustar vídeos desde una URL externa, mediante oEmbed, es utilizar el shortcode

embed

, que está bastante poco documentado.

Puedes usarlo manualmente así:

[ embed]https://ayudawp.com/code.mp4[/embed ]

Pero es más fácil utilizando el cargador de medios del editor clásico, pues en el editor de bloques se usa otro sistema, que veremos más adelante.

Se hace como puedes ver en este vídeo…

Nota: En los códigos de ejemplo de shortcodes sobran espacios después y antes de los corchetes, para que no se ejecute el shortcode, y solo se muestre como código. Acuérdate de quitarlos si los copias para utilizarlos.

Resumiendo

Así que, como has podido ver, la funcionalidad oEmbed nos permite incrustar vídeos en WordPress de 4 maneras:

  1. Pegando la URL del vídeo directamente en el editor.
  2. Añadiendo el bloque incrustado del servicio de la URL.
  3. Añadiendo el bloque incrustado genérico.
  4. Con el shortcode
    embed

    .

Y en los 4 métodos el resultado es el mismo, luego lo más rápido y eficaz es usar el primero, pegar directamente la URL en el editor, que además funciona igual de bien en el editor de bloques y en el editor clásico.

Sin opciones

La gran desventaja de este método de insertar vídeos mediante oEmbed es que no puedes aplicar ajustes a tus vídeos, salvo los estilos aplicados por el tema activo o el mismo WordPress por defecto.

Más adelante veremos que puedes personalizar el reproductor.

Incrustar vídeos en WordPress con el shortcode

video

La característica oEmbed es genial por su rapidez, pero en algunas ocasiones no será la mejor opción:

  • Si el vídeo no está alojado en un servicio compatible con oEmbed.
  • Si quieres personalizar la reproducción.

Como oEmbed se basa en el simple pegado de la URL no tienes parámetros que aplicar, así que a los vídeos incrustados mediante esa técnica no podrás aplicarle personalizaciones, no hay opciones.

Pero con el shortcode

video

la cosa cambia, a mejor, y mucho.

Shortcode de vídeo básico

Incrustar en WordPress un vídeo desde cualquier URL con un shortcode es también sencillo.

Solo tienes que usar esta sintaxis:

[ video src="url_del_video.mp4" ]

Por ejemplo, así:

[ video src="https://ayudawp.com/code.mp4" ]

Shortcode sin vídeo

Una curiosidad del shortcode de vídeo es que puedes incluso no indicar la URL (src) del vídeo.

Si en la entrada o página ya hay un archivo de vídeo adjunto a la misma solo tienes que poner el shortcode, sin nada más, así:

[ video ]

WordPress mostrará por defecto el primer vídeo adjunto a la publicación.

Shortcode con vídeos alternativos

Una buena costumbre actualmente es ofrecer varios formatos del mismo vídeo, por compatibilidad con los distintos navegadores.

Así, puedes indicar mediante el shortcode que se muestre un formato y, si el navegador no es compatible con él, usar otro. Por ejemplo:

[ video webm="https://ayudawp.com/code.webm" mp4="https://ayudawp.com/code.mp4" ]

En este caso el reproductor mostrará el formato webm si el navegador es compatible, y sino mostrará el vídeo en formato mp4.

Los formatos que puedes incluir son: mp4, m4v, webm, ogv, wmv y flv.

Shortcode para que el vídeo se reproduzca automáticamente

Si quieres que el vídeo a mostrar se reproduzca automáticamente al cargar la entrada o página, y esté disponible el vídeo, debes añadir un parámetro al shortcode, así:

[ video src="https://ayudawp.com/code.mp4" autoplay="on" ]

Las opciones del parámetro

autoplay

son dos:

off

y

on

, pero si no pones nada la configuración por defecto es

off

y no se reproducirá automáticamente el vídeo.

Shortcode para mostrar una imagen de poster

¿Quieres usar una imagen de carátula del vídeo en vez de que se muestre el primer fotograma del mismo?

Para eso está el parámetro

poster

, que te permite especificar la URL de la imagen que quieres que se muestre antes de reproducir el vídeo.

Se usa así:

[ video src="https://ayudawp.com/code.mp4" poster="https://ayudawp.com/poster.jpg" ]

Por supuesto, ayudará que la imagen tenga la misma relación de aspecto que el vídeo (4:3, 16:9) para que se vea mejor.

Shortcode para que el vídeo se reproduzca en bucle

En el caso de que quieras que el vídeo se reproduzca en bucle sin fin (mientras alguien no lo detenga), tienes el parámetro

loop

.

Si está activo, cuando el vídeo llega al final de su metraje vuelve a reproducirse de nuevo desde el principio una y otra vez hasta que el espectador pare el reproductor.

Al igual que el autoplay, tiene dos posibles valores:

on

y

off

. Por defecto, como imaginas, es

off

, no se reproduce en bucle.

[ video src="https://ayudawp.com/code.mp4" loop="on" ]

Shortcode para que el vídeo se reproduzca automáticamente sin fin

Por si no lo has adivinado aún, por supuesto, puedes combinar

autoplay

con

loop

y así mostrar un vídeo en bucle automáticamente al cargar la página:

[ video src="https://ayudawp.com/code.mp4" autoplay="on" loop="on" ]

Seguro que se te ocurre alguna situación en la que utilizar esta combinación.

Shortcode para precargar el vídeo

¡Síííííí, puedes aplicar parámetros de precarga a los vídeos para ofrecer una experiencia de carga de página más óptima a tus visitantes!

Es sencillo, y tienes 3 posibilidades a utilizar:

  • metadata

    – Al cargar la página solo se precargan los metadatos del vídeo (duración, título, etc.)

  • auto

    – Al cargar la página se precarga completo.

  • none

    – Al cargar la página no se precarga nada del vídeo. Solo se cargarán al iniciar el reproductor.

Debes saber que el parámetro por defecto es

metadata

, así que si no lo usas eso es lo que se precargará. Para mi gusto sería más óptimo no precargar nada por defecto, que el valor fuese

none

.

El uso sería de este modo:

[ video src="https://ayudawp.com/code.mp4" preload="none" ]

Shortcode para especificar dimensiones del vídeo

Para finalizar, aún hay otros 2 parámetros que podemos usar en el shortcode de vídeo, en este caso para forzar altos y anchos específicos del reproductor.

Son los siguientes:

  • height

    – Para forzar la altura del reproductor.

  • width

    – Para forzar el ancho del reproductor.

Lo más habitual es usar ambos combinados, pues sino se pueden visualizar reproductores con tamaños extraños, y por supuesto no adaptados al vídeo.

Se haría tal que así:

[ video src="https://ayudawp.com/code.mp4" width="900" height="400" ]

Pero, a pesar de existir, mi consejo, y lo mejor que puedes hacer, es no utilizarlos, por varios motivos:

  • Si no especificas un ancho y alto del vídeo WordPress mostrará el reproductor adaptado automáticamente al tamaño y relación de aspecto del vídeo, y al ancho del contenedor de tu tema activo, ajustándose perfectamente a las dimensiones de tu contenido.
  • Si especificas un ancho o alto del vídeo mayor que el contenedor del tema activo el reproductor seguramente no encaje en tu contenido y puedes destrozar el aspecto de tus publicaciones.
  • Al especificar un ancho y alto del vídeo no será adaptable a otros dispositivos (responsive) porque estás forzando por código unas dimensiones. Esto generará problemas de visualización graves sobre todo en móviles.

Luego mejor no utilices estos parámetros en tus vídeos incrustados con shortcode salvo en situaciones muy muy concretas.

Incrustar vídeos en WordPress subiendo el vídeo

Otro modo de incrustar vídeos en las publicaciones de tu web WordPress es subiendo un vídeo, como harías con una imagen.

Solo tienes que elegir la ubicación del contenido en el que quieras insertarlo y tienes varias posibilidades.

Incrustar vídeos subidos en el editor clásico

Lo primero es subir el vídeo, que puedes hacer de 2 maneras:

  1. Arrastrar y soltar el archivo de vídeo en el contenido.
  2. Hacer clic en el botón de «Añadir objeto», subir tu video y luego hacer clic en «Incrustar reproductor de medios».

En ambos casos se abrirá el cargador de medios, y con ambos métodos el modo de hacerlo es hacer clic en «Incrustar reproductor de medios».

Una vez incrustado en tu contenido, podrás modificar algunos parámetros del vídeo.

En el siguiente vídeo puedes ver cómo se hace todo lo que te estoy explicando, además de los ajustes que puedes personalizar:

¿A que te han sonado familiares los ajustes de fuentes alternativas, precarga, poster y demás personalizables?

Efectivamente, al incrustar un vídeo desde el cargador de medios de WordPress en el editor clásico lo que obtienes en HTML es el shortcode que vimos antes, pero aquí lo haces de manera visual todo.

El código resultante sería como cualquiera de los ejemplos que vimos antes del shortcode

video

, por supuesto dependiendo de lo que personalices.

La ventaja de usar el shortcode

video

que te he explicado arriba es que también puedes personalizar ajustes de vídeos insertados desde una URL, pues si es el caso, el cargador de medios no te ofrece esas opciones, pues utiliza en su lugar el shortcode

embed

, que también vimos antes.

Incrustar vídeos subidos en el editor de bloques

También el editor de bloques nos permite subir e incrustar vídeos fácilmente, e igual que en el clásico, tenemos varias maneras de subirlo:

  1. Arrastrar y soltar el archivo de vídeo en el contenido.
  2. Añadir un bloque de vídeo y subir el archivo de vídeo desde los botones «Subir» o «Biblioteca de medios»

Da igual el método que elijas, una vez subido podrás personalizar bastantes ajustes, en este caso también de estilo del video.

En el siguiente vídeo puedes ver cómo se hace arrastrando y soltando un archivo …

Y en este otro con el bloque de vídeo…

Adicionalmente a los ajustes que encontramos en el editor clásico o el shortcode, en el editor de bloques también puedes decidir si mostrar o no los controles del reproductor, o incluso integrar la reproducción con la página.

También puedes aplicar estilos de ancho al bloque, haciendo que sea de ancho amplio o ancho completo.

Incrustar vídeos de fondo en WordPress

Además de todo lo anterior, con el editor de bloques puedes añadir también un tipo especial de bloque llamado fondo, cuyo fondo puede ser una imagen o un vídeo, y sobre el que puedes añadir un texto.

Mira en el siguiente vídeo sus posibilidades …

También puedes crear un fondo de vídeo a partir de un bloque de vídeo ya incrustado, cambiando el tipo de bloque. En este vídeo puedes ver cómo se hace:

Incrustar un vídeo en un widget

Otra posibilidad que tenemos en WordPress es incrustar un vídeo en un widget, para que se muestre en las áreas de widgets de nuestra web.

Simplemente tenemos que insertar un widget de vídeo en el área de widgets que queramos, desde el personalizador de WordPress, así de fácil…

Incrustar una lista de reproducción de vídeo en WordPress

Sumado a todo lo anterior, también puedes incrustar, no un vídeo y luego otro, sino una lista de vídeos, con un completo reproductor que te permite pasar de un vídeo a otro.

Mola ¿no?

Pues, al menos de momento, solo puedes hacerlo de manera sencilla en el editor clásico.

Simplemente abre el cargador de medios del editor haciendo clic en «Añadir objeto» y, en el menú de la izquierda del mismo, elige «Crear lista de reproducción de vídeos».

A continuación selecciona los vídeos que incluirá haciendo clic en cada uno de ellos en la biblioteca de medios y luego haz clic en «Crear una nueva lista de reproducción de vídeos».

A continuación solo tienes que decidir si quieres mostrar la lista de vídeos y las imágenes para, reordenarlos, y finalizar haciendo clic en «Insertar lista de reproducción de vídeo»

Mejor lo vemos en un vídeo cortito ¿no?

Dale al reproductor…

¿Y no se pueden insertar listas de reproducción en el editor de bloques?

En principio no … visualmente.

Pero sí que puedes usar el shortcode de WordPress

playlist

.

Añade un bloque de shortcode y la sintaxis es la siguiente:

[ playlist type="video" ids="427,439"]

Donde los ids son los números únicos de los vídeos que quieres mostrar en la lista de reproducción de vídeo.

Para localizar estos ids, en la biblioteca de medios de WordPress (Escritorio > Medios) haz clic en el vídeo del que quieras saber el id y, al abrirse la ventana del detalles del medio, en la URL verás el id del mismo.

Por ejemplo:

https://ayudawp.com/test/wp-admin/upload.php?item=438

En la URL anterior el id es 438.

Verás que no es tan fácil como con el editor clásico pero ¿a que tampoco se usa tantas veces esto de las listas de vídeos?

¿No hay un truco para hacerlo más fácil en el editor de bloques?

Venga va, te lo cuento. Pero que sepas que ya deberías haberlo adivinado.

Mira el siguiente vídeo para descubrir el truco:

Pues sí, solo tienes que insertar un bloque clásico y, desde ahí ya puedes insertar la lista de reproducción de vídeo.

Como plus, también puedes convertir el clásico en bloque y el editor lo convierte automáticamente en un shortcode de lista de reproducción.

La otra posibilidad es instalar el plugin Player with Playlist Block Lite, que añade un bloque adicional, adivina, con el que puedes incrustar listas de reproducción de vídeo.

Cómo cambiar el aspecto del reproductor de vídeo de WordPress

Bueno, una vez visto cómo subir e incrustar vídeos en WordPress, ¿y si vemos cómo personalizar el aspecto del reproductor?

Pues en el editor clásico lo tenemos bastante fácil, solo tienes que instalar el plugin Media Player Style Kit, activarlo, y en el personalizador de WordPress ponerlo a tu gusto, así…

Verás que puedes cambiar los colores de cada uno de los elementos y controles del reproductor, y se aplican tanto al reproductor de vídeo como al de audio, porque en realidad es el mismo.

Pero como puedes ver en la misma captura anterior, los cambios no afectan al reproductor del editor de bloques.

Entonces ¿cómo cambio el aspecto del reproductor de vídeo del editor de bloques?

Bueno, en realidad es el reproductor de WordPress, solo que Gutenberg, el motor del editor de bloques, añade su propio CSS, así que tienes que forzar tu propio CSS, desde el personalizador.

La mejor opción sería poder añadir al bloque de vídeo estilos de bloque mediante la API de variaciones de estilo de Gutenberg, pero actualmente solo está disponible en los bloques de botón, cita, párrafo de cita y separador, aunque se ha pedido que se añada al resto de bloques.

En el siguiente vídeo tienes un ejemplo de lo que te estoy hablando:

Mientras tanto, como el reproductor de medios de WordPress está basado en MediaElement.js, te recomiendo esta guía en profundidad de CSSIgniter.

¿Dudas?

Bueno, espero que te sirva esta guía de cómo incrustar vídeo en WordPress, si tienes alguna duda no temas preguntar en los comentarios, te ayudaré en lo posible.

La entrada Vídeo en WordPress: Guía completa para incrustar vídeos y personalizar el reproductor la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Laura D´Cuero

Copywriter, Redactora de Content SEO.
Laura D´Cuero
0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *