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.
Índice de contenidos
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 como el siguiente:
< figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">< div class="wp-block-embed__wrapper"> https://www.servicio-video.com/watch?v=4h7YtxuYP_8 < /div>< /figure>
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:
- Eligiendo el bloque incrustado en cuestión (en el ejemplo YouTube)
- 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:
- Pegando la URL del vídeo directamente en el editor.
- Añadiendo el bloque incrustado del servicio de la URL.
- Añadiendo el bloque incrustado genérico.
- 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:
- Arrastrar y soltar el archivo de vídeo en el contenido.
- 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:
- Arrastrar y soltar el archivo de vídeo en el contenido.
- 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.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Muy buen post, Fernando, la biblia para insertar vídeos en WP. Felicidades.
Muy buen post, utilizo embed-responsive, pero tendré en cuenta otras opciones.
Para reproducir hls (una lista m3m8) utilizo bradmax pero me salta este y el reproductor por defecto de wordpress, dejándome dos plays en el vídeo e impidiendo que se pueda dar al play. Cómo puedo desactivar el reproductor por defecto de wordpress para solucionar ese error?
Muy bueno, esto me ha sido de gran ayuda.
Hola soy nuevo en wordpress, tengo la duda de como hacer que una entrada con video aparezca en mi home mostrando el video y no la imagen destacada
?
Yo tengo el mismo problema… alguna solución?? Estoy usando el bloque de gutenberg de Youtube, pero no sé cómo visualizarlo en el listado… Muchas gracias!!
Buenas tardes. Necesito colocar en woocomerce, algunos videos, pero que no esten en un producto, sino ahi entre medio de algun producto. Alguien lo hizo?
Hola: quería poder quitar los controles de vídeo que sólo quedara play/stop y que tampoco pudiera descargarse, ¿cómo se hace eso? Tengo Elementor pero no logro hacerlo como quiero. Gracias
Hola Fernando, te quería consultar lo siguiente. Quisiera que un video incrustado de youtube se vea en la vista miniatura del post, es decir en el inicio antes de entrar al post, es posible? porque con el formato video de entrada «video» no funciona.
Espero tu respuesta
Gracias!
Hola, existe alguna manera de visualizar el número de reproducciones que tiene un vídeo? Gracias
Hola Fernando, que gran aporte!
Quisiera hacerte una pregunta. No tengo inconvenientes en incrustar videos en mis Entradas. Sin embargo, no puedo visualizarlas en mis post. Me imagino que es por que he diseñado un pagina Post Content para que todas las entradas adquieran el mismo diseño. Que deberia integrar en mi pagina de post content para que pudiera visualizar los videos?
Hola, muy bueno tu post, muchas gracias. Estoy buscando cómo cambiar de video (español-portugués) mediante un boton situado debajo del video con sus respectivos idiomas ¿puedes ayudarme?
Hola, en primer lugar, felicitaciones me gusta seguirte porque aprendo mucho contigo.
Queria preguntarte el siguiente tema, estoy volviendo loco buscando como poner un video que se reproduzca y que puedas ir haciendo scroll a la página con sus diferentes apartados o bloques , como la imagen fija que se puede poner en ajustes del sitio pero que fuera un video, asi quedaria siempre este fondo reproduciendose el video siempre, esto me lleva de cabeza, no lo he conseguido averiguar.
¿Puedes darme una solución si existe?
Yo tengo un problema con algunos vídeos de mi web, en el editor, incrusto el video de youtube y se ve perfectamente, pero cuando lo guardo y lo publico el video no se ve en la pagina publicada, aparece como un cuadro en blanco, he probado en el ordenador y en el móvil y con distintos navegadores.
¿A qué se puede deber?
Gracias.
Buenas! excelente el aporte.
En mi caso me surge la duda de como crear una imagen que al clickearla abra un video en una ventana emergente.
Gracias! saludos
Para eso tendrías que instalar un plugin. Busca por «video lightbox»
Hola buenas tardes amigos. Quiero poner un video en el home aquí te paso un mismo tema de WordPress y uno tiene video y el otro no tiene video. Puedes indicarme como es que se puede incrustar ese viseo sin destruir el home original de WordPress.. Saludos Gustavo
https://mediterrani.com/
https://doc.acmethemes.com/education-base/
Normalmente esos temas suelen tener un espacio reservado para poner un vídeo a pantalla completa, y sino puedes hacerlo con un bloque de fondo.
Pues bien ante todo muchas gracias por tu ayuda, creo que poner un video allí y que este ajustado debe ser todo un desafío… Creo que tendía que hacer empezado al revés, tener un Tema que tenga ya insertado un video. Bueno si alguno de uds sabe de algún tema de WordPress que inicie con un video le estaré muy agradecido.
Todo claro pero a la hora de llevar videos desde Vimeo a mi home sale una cortinilla al principio del video y no sé como eliminarlo. ¿Cómo lo corrijo? ¿En capa de fondo, en fondo, tiempo de inicio? Gracias, dejo el link para poder comprobar lo que comento.
http://www.blogregio.com
Eso que te sale, por lo que veo en el código, es un overlay de Elementor. Revisa los ajustes de diseño de la sección y/o el elemento.
Muchas gracias, lo reviso esta tarde
Hola buenas,
Empecé hace poco a armar mi web por mi propia cuenta. De momento aparece un video «Intro» y después de que termina de reproducirse, quisiera que se dirigiera automáticamente a otra página, pero no he encontrado cómo hacerlo. Estoy usando Elementor ¿Puedes sugerirme que hacer?
¡De antemano muchas gracias!
Hola Fernando, una consulta ¿sabes si es posible subir un video a wordpress pero que el video este alojado desde el servidor? existe algún plugin para esta opción? si tienes información te lo agradecería mucho.
Saludos!
Si te refieres al propio servidor claro, subiendo el vídeo directamente desde el editor