Cómo añadir vídeos en WordPress

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparación de dos variantes de la misma página mediante test A/B

Comparte este artículo

Crear contenidos interesantes y atractivos es la clave para que tus visitantes se queden atrapados con ellos y quieran saber más de ti y tus productos. Anteriormente, ya comenté algunos trucos para crear páginas que enamoren y mencioné explícitamente la importancia de incluir elementos visuales.

De hecho, el año pasado, un estudio realizado por Zenith, predijo que en el 2021 habría un incremento de visualizaciones de videos de hasta los 100 minutos diarios y un incremento de gasto en publicidad en vídeos de un 35%. Según Cisco, en el año 2022 el 80% de todo el tráfico de internet será en formato de video. Y mucho me temo que todas estas predicciones se quedaron cortas al no tener en cuenta la actual pandemia.

Global online video viewing
Predicción global de visualización de videos en línea y de publicidad para el 2021.

Así que, sin más preámbulos sobre la importancia de añadir vídeos en las entradas y páginas de tu web, vayamos a ver lo fácil que es añadir vídeos en WordPress y qué nuevas funcionalidades nos proporciona la última versión de Gutenberg 9.2.2.

Copiar la URL de un vídeo

Tenemos la suerte de que el editor de WordPress te permite incrustar un vídeo de cualquier plataforma de forma muy fácil. En el navegador, desde la plataforma en la que se encuentra el vídeo, puedes copiar directamente la URL del vídeo en cuestión.

Captura de pantalla de YouTube
Selecciona y copia la URL del vídeo que quieres incrustrar.

También puedes copiar la URL haciendo clic en el botón Compartir que encuentras para compartir el vídeo y con el que puedes añadir opciones adicionales como, por ejemplo, indicar el tiempo de inicio del video.

Compartir vídeo de YouTube
Compartir vídeo de YouTube indicando que se inicie en el minuto 1.

Luego sólo tienes que pegarlo directamente en un bloque de texto o también tienes la opción de previamente seleccionar el bloque del tipo de video que vas a insertar. Así, por ejemplo, si quiero insertar el vídeo de WordCamp US 2019 – State of the Word de YouTube y que empiece justo en el minuto en que aparece Matt Mullenweg, crearé un nuevo bloque de YouTube e insertaré la URL https://youtu.be/gS6_xOABTWo?t=2085 (o alternativamente la url https://www.youtube.com/watch?v=gS6_xOABTWo&start=2085).

Insertar vídeo de YouTube
Insertar un vídeo de YouTube seleccionando el bloque de tipo YouTube.

Fíjate que el tiempo debe indicarse en segundos. Además, también tienes la opción de alinear el vídeo como más te interese en tu página.

Alinear vídeo del bloque de tipo YouTube
Alinear vídeo del bloque de tipo YouTube.

Y, ¡voilà! a continuación ya tienes el vídeo insertado.

Pero no sólo eso, cuando añades un bloque de YouTube (u otro tipo de vídeo) también tienes otras opciones que puedes añadirle a la visualización del vídeo y que dependen de la plataforma en que se visualiza.

Así, por ejemplo, en el caso de YouTube, las opciones disponibles (mediante parámetros adicionales en la URL) que tienes son:

  • Para incrustar el vídeo con anchura y altura predeterminadas adaptadas al tema: https://www.youtube.com/gS6_xOABTWo
  • Para especificar el ancho y la altura explícitamente: https://www.youtube.com/watch?v=gS6_xOABTWo?&w=320&h=240
  • Para especificar sólo el ancho: https://www.youtube.com/watch?v=gS6_xOABTWo&w=320
  • Para alinear el reproductor a la izquierda: youtube https://www.youtube.com/watch?v=gS6_xOABTWo&align=left
  • Para alinear el reproductor a la derecha: youtube https://www.youtube.com/watch?v=gS6_xOABTWo&align=right
  • Para mostrar sólo los vídeos relacionados del mismo canal tras acabar el vídeo: youtube https://www.youtube.com/watch?v=gS6_xOABTWo&rel=0
  • Para especificar una hora de inicio y de fin de un vídeo, añades la hora de inicio y de fin: https://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500

Subir y visualizar tu vídeo en tu WordPress

Alguna vez puede ocurrir que no quieras subir tus propios vídeos a plataformas de terceros y quieras tenerlos exclusivamente en tu servidor de WordPress.

Subir un vídeo a tu biblioteca de medios e insertarlo es tan fácil como subir cualquier otra imagen. Haz clic en Medios o en añadir un bloque de tipo Vídeo:

Bloque vídeo de Gutenberg
Bloque vídeo de Gutenberg.

Al igual que cuando añades una imagen, tienes la opción de subir directamente el vídeo, seleccionarlo de la biblioteca de medios o insertar su URL.

Añadir video desde el editor de bloques.
Añadir video desde el editor de bloques.

Si vamos a la biblioteca de medios, tan sólo hemos de seleccionar el vídeo que queremos insertar y ya lo tendremos disponible en nuestra página o entrada.

Selección del vídeo a insertar
En la biblioteca de medios se mostrarán todos los vídeos disponibles para insertar.

Y una vez seleccionado, lo tendremos disponible para todos nuestros visitantes.

Además, la nueva versión de Gutenberg 9.2.2. nos añade nuevas funcionalidades a la inserción de vídeos. En particular, permite que desde el menú de edición añadas elementos HTML de tipo <track>.

Seguramente habrás observado alguna vez que si te has descargado un vídeo, en la carpeta que lo contiene también se incluye algún archivo de tipo SRT. Estos son archivos de subtítulos que no están incluidos en el vídeo pero que el reproductor de vídeo es capaz de extraer y mostrarlos sincronizados en el vídeo que visualizas. Pues un elemento de track sirve para indicar la localización y alguna característica adicional de estos archivos SRT.

Es decir, al insertar un vídeo el HTML que se genera es parecido a:

<!-- wp:video {"id":15850} -->
<figure class="wp-block-video">
<video controls=""                     
src="/mi-sitio.com/.../mi-video.mp4"></video></figure>
<!-- /wp:video -->

Pues con esta nueva versión de Gutenberg, ahora puedes añadir elementos de track a los vídeos desde el menú de edición sin necesidad de ir a editar directamente el código HTML. Así, por ejemplo, podrías añadir unos subtítulos en inglés a un vídeo y el código HTML incluiría un track con la información de los subtítulos en cuestión.

<video controls="" src="/mi-sitio.com/.../mi-video.mp4">
<track src="mi-sitio.com/.../english-captions.srt" label="English" srclang="en"/>
</video>

Los atributos que se pueden indicar en los tracks son los siguientes:

  • srclang – Idioma de los datos de texto del track. Debe ser un código de etiqueta de idioma BCP 47 válido.
  • label – Título para la interfaz del reproductor.
  • kind – Cómo se usa el texto del track. Puede tener las siguientes palabras clave:
    • subtitles
      • Subtítulos para traducciones del contenido del vídeo (e.g. subtítulos en castellano cuando el vídeo es en inglés) pensado para personas que no entienden un idioma.
    • captions
      • Transcripción de lo que se escucha en el vídeo (diálogos y otros sonidos) pensado para personas con problemas de audición.
    • descriptions
      • Descripción textual del contenido del vídeo pensado para personas ciegas o que no pueden visualizar el vídeo.
    • chapters
      • Los títulos de los capítulos están pensados para ser usados cuando el usuario navega por recursos multimedia.
    • metadata
      • Tracks usados por scripts. No visible a los usuarios.
  • src – URL del fichero de texto.

Y yendo a lo práctico, ¿cómo añadimos estos tracks? Muy fácil, tras añadir como ya he comentado antes un bloque de tipo vídeo y haber seleccionado el vídeo que queremos mostrar, nos aparece una nueva opción en el menú de la edición del vídeo que es la de Añadir Track.

Sube o selecciona de la biblioteca de medios el archivo que contiene el texto del track.
Sube o selecciona de la biblioteca de medios el archivo que contiene el texto del track.

Tras subir el archivo en la biblioteca de medios, ya lo puedes seleccionar.

Captura de pantalla de diferentes elementos en la biblioteca de medios de WordPress
Selecciona de la biblioteca de medios el track que contiene el texto a sincronizar con el vídeo.

Y verás como ya te aparece en el menú de edición del vídeo que puedes editar los atributos del track:

Editar las propiedades del track.
Tras seleccionar el archivo ya puedes editar las propiedades del track.

Haz clic en el botón de Editar y modifica los atributos como te convenga. Ya tendrás incluido en tu video el track de texto sincronizado con la visualización del mismo.

Captura de pantalla de la interfaz de edición de los subtítulos
Modifica los atributos del track como te convengan.

De esta forma, ahora no sólo puedes tener tus propios vídeos en tu biblioteca de medios, si no que además puedes incluir de forma fácil información adicional de los mismos.

Ya has visto que incluir vídeos que tengas alojadas en plataformas de terceros es muy fácil con tan sólo copiar la URL de dónde se localiza el vídeo en cuestión. Pero si, por el motivo que fuera, prefieres tener alojados tus vídeos en tu propia instalación WordPress, con esta última versión de Gutenberg ya puedes mostrar tus vídeos de forma cómoda.

Photo by CardMapr on Unsplash.

2 comentarios en «Cómo añadir vídeos en WordPress»

  1. Hola Ruth un detalle.
    Si el vídeo lo haces con un embebido de Youtube, al cargarlo se van a añadir cookie publicitarias de esta plataforma que están fuera de tu control.

    En este artículo podéis ver cómo evitar que esto ocurra:
    https://carlosmdh.es/tutoriales/como-impedir-que-youtube-nos-inserte-sus-propias-cookies/

    Y en este como hacer para que los vídeos que hayas insertado por el método que comentas, cambien su url para que no se carguen las cookies de Youtube mediante un pequeño snippet:
    https://carlosmdh.es/snippets/como-modificar-la-url-videos-de-youtube/

    Seguimos!!!
    Feliz sábado.

    1. Hola Carlos,
      Muchas gracias por leernos y tu aportación. Muy útil y seguro que a nuestros lectores les interesa.
      Un saludo.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.