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.
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.
Nelio Popups
¡Un plugin fantástico! Es muy fácil crear ventanas emergentes con el editor que ya conoces y las opciones que ofrece están muy bien diseñadas.
Juan Hernando
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.
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.
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).
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.
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:
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.
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.
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.
Tras subir el archivo en la biblioteca de medios, ya lo puedes seleccionar.
Y verás como ya te aparece en el menú de edición del vídeo que puedes editar los atributos 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.
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.
Deja una respuesta