Insertar Vídeo en WordPress con HTML5

Publicada en WordPress.

Una imagen vale más que mil palabras. Todos conocemos este dicho popular. Y además, si la imagen incluye sonido y movimiento, mucho mejor 🙂

Los vídeos cada vez son más y más importantes dentro del mundo de Internet. Y en WordPress no iban a ser menos. Son muchos los temas para WordPress que incluyen la posibilidad de incrustar vídeos de fondo en las páginas, para llamar la atención a posibles clientes. O los blogs que añaden vídeotutoriales en las entradas, ya que está demostrado que aprendemos mucho más rápido a través de imágenes que de texto.

Sin embargo, añadir vídeos a nuestra web en WordPress no siempre fue fácil. En esta entrada repaso la evolución que ha habido en la manera de incrustar vídeo en WordPress y cómo se nos ha facilitado todo el tema a los que usamos habitualmente este gestor de contenidos. ¡Ojo! Eso no quiere decir que todo sea un camino de rosas… Hace unos días, por ejemplo, tuve un montón de problemas al intentar incrustar vídeos en formato .MOV en las entradas del blog de un cliente que quería migrar su web de Drupal a WordPress. Al final conseguí solucionarlo y poder incrustar los malditos .MOV. ¿Cómo lo hice? La respuesta al final de la entrada 😉

Plugins para añadir vídeo

En el principio de los tiempos, los que querían añadir vídeos a sus contenidos en WordPress lo tenían bastante complicado. No quedaba otra que ir al Directorio de Plugins de WordPress e investigar cual de ellos proporcionaba la funcionalidad concreta que estábamos buscando. O eso o tirar de código HTML…

Hoy en día sigue habiendo un catálogo bastante curioso de plugins que permiten trabajar con vídeo. Veamos algunos de los más populares:

Video Gallery
Video Gallery

Video Gallery permite añadir vídeos de Vimeo y YouTube de cinco maneras diferentes. Además, incluye la opción de subir el vídeo a la Galería Multimedia de WordPress y así añadir meta información a los vídeos.

Video Embed & Thumbnail Generator
Video Embed & Thumbnail Generator

Video Embed & Thumbnail Generator es un plugin para hacer un poco más fácil la incrustación de vídeos, la generación de miniaturas, y la codificación de vídeos en archivos compatibles con HTML5.

Advanced Responsive Video Embedder
Advanced Responsive Video Embedder

Advanced Responsive Video Embedder permite incrustar vídeos y formatearlos para que se vean correctamente en todos los dispositivos (responsive).

Video Sidebar Widgets
Video Sidebar Widgets

Video Sidebar Widgets incluye una colección de widgets de la barra lateral para la visualización de vídeos de 14 redes de intercambio de vídeo.

Featured Video Plus
Featured Video Plus

Featured Video Plus permite añadir vídeos como imágenes destacadas en las entradas. Básicamente, en vez de una imagen destacada, podremos poner un vídeo.

Video Thumbnails
Video Thumbnails

Video Thumbnails hace que sea fácil mostrar automáticamente miniaturas de vídeo en tu tema de WordPress.

WordPress 2.9 – Facilitando las cosas

El 18 de diciembre de 2009, WordPress Versión 2.9 «Carmen» fue lanzado al público. Y, por supuesto, aquí tenemos el vídeo en el que se hace resumen de las mejoras añadidas:

Entre las novedades (en su día lo fueron) a destacar, tenemos el poder incrustar vídeo de forma más sencilla, simplemente pegando una URL en el editor de texto de WordPress. De esta forma, la URL del vídeo se transforma mágicamente en el código de inserción adecuado, con soporte para oEmbed para YouTube, Daily Motion, Blip.tv, Flickr, Hulu, Viddler, Qik, Revision3, Scribd, Google video, Photobucket, PollDaddy y WordPress.tv (y más que se fueron añadiendo en siguientes versiones).

Veamos un ejemplo. Si escribimos el siguiente texto, que incluye un enlace a un vídeo de Youtube en su propia línea de texto, dentro del editor de una entrada:

Mira qué vídeo más bonito:

http://www.youtube.com/watch?v = dQw4w9WgXcQ

Sí, muy bonito el vídeo.

Tendremos como resultado el vídeo en cuestión incrustado en la entrada. ¡Así de fácil!

Otra opción es envolver la URL con el shortcode

Lamentablemente, si la URL es la de un vídeo en formato .MOV, no obtendremos el resultado que esperábamos… 🙁

Shortcode [video]

En la versión 3.6 de WordPress se añadió un nuevo shortcode [video] para incrustar vídeos. El Codex explica su funcionamiento. Supongamos que tenemos la URL de un vídeo dentro de la Librería Multimedia o externo y que queremos incrustar en una entrada. Tan solo con usar el shortcode de la siguiente forma nos sirve:

[video src="video-source.mp4"]

En el caso de que tengamos el vídeo en varios formatos para que diferentes dispositivos cojan el que les funcione, podemos indicarlo de la siguiente forma:

[video mp4="source.mp4" ogv="source.ogv" webm="source.webm"]

Desafortunadamente, sólo podemos indicar los formatos ‘mp4’, ‘m4v’, ‘webm’, ‘ogv’, ‘wmv’, ‘flv’ dentro de este shortcode. De nuevo, no hay ni rastro de nuestro deseado .MOV 🙁

HTML5 al rescate

Cuando todo lo demás falla, la solución es HTML5. Por suerte, HTML5 añade una nueva etiqueta <video> en su especificación. La usamos del siguiente modo:

<video src="url/del/video.mov" controls style="width:100%;"></video>

¡Funciona! Esto es todo lo que necesitas para añadir un vídeo .MOV a tu WordPress sin ningún tipo de plugin o código embebido. Sólo una sencilla etiqueta HTML5.

Sin embargo, siempre hay algún problema. En concreto, el desacuerdo entre los desarrolladores de navegadores en materia de normas de codificadores de vídeo. Al usar la etiqueta <video> de HTML5 tendrás que tener en cuenta cómo los navegadores modernos como Chrome, Firefox e Internet Explorer implementan los estándares web HTML5 de vídeo, y entender cómo los usuarios ven el vídeo en navegadores antiguos.

Por lo menos con la etiqueta <video> de HTML5 hemos podido incrustar los vídeos .MOV en WordPress.

Imagen destacada de Mr.TinDC

FlojaNo está malBienMuy bien¡Impecable! (3 votos, promedio: 5,00 de 5)
Cargando…

25 comentarios en «Insertar Vídeo en WordPress con HTML5»

  1. Buenas,
    Hay alguna posibilidad de pegar un vídeo que se encuentra en un periódico online en mi página a través de wordpress?
    Gracias.

    1. Hola Jose,

      Depende del formato de ese video. Normalmente, si el periodico lo permite, suelen poner algún método para poderlo compartir (e incrustar). Si no te aparece, quizás mejor no hacerlo, ya que puede que tenga derechos de autor y ponerlo en tu web sin permiso no es muy correcto.

  2. Alguien a probado ya el plugin librevideojs, para mi funciona muy bien.

  3. Deseo tener miniaturas parecidas al de la pagina porno xvideos, perdon por el ejemplo creo que tambien los tiene youtube, pero asi con movimiento

  4. Hola Antonio, muchas gracias por compartir esta información. Sabes si existe algún plugin para que otras personas puedan incrustar (embed) los videos que subo a mi wordpress?
    Saludos

    1. Hola Alan. La verdad es que no conozco ningún plugin para esa labor. He hecho una búsqueda rápida en el directorio de plugins de WordPress y no he sabido encontrar nada que haga lo que necesitas. Una opción es proporcionar tu mismo la URL del propio vídeo en tu Biblioteca de Medios y ponerla como pie del vídeo. ¡Un saludo!

  5. Hola Antonio, gracias por el post, sabes si hay alguna forma de hacer que el vídeo que se reproduzca automáticamente usando el comando de html5
    Saludos

    1. Con el atributo autoplay debería funcionarte. Algo tal que así: <video src="url/del/video.mov" autoplay controls style="width:100%;"></video>

  6. Alguna forma de colocar una miniatura en el video con html5

  7. Gracias por el artículo! De ayuda y en castellano 😀

  8. hola, gracias por el articulo, tengo una pregunta y es la siguiente, se puede añadir un vídeo a la pagina web pero sin ningún url, que este alojado sin necesidad de otro sitio

    1. Si te refieres a subir el vídeo a tu propia web en vez de enlazarlo desde fuera, sí que puedes hacerlo. Funciona de la misma forma que cuando subes una imagen a la biblioteca de medios.

  9. Hola, existe alguna forma de que el video se reproduzca solo, y cuando termine empieze de nuevo? me explico, como que entre en bucle.
    Gracias.

  10. Hola Antonio,

    Han pasado dos años desde que visite tu post, y quería preguntarte si sabes como subir un banner html5 creado en google web desinger a mi sitio wordpress, es una banner que hice para mandar a un link de afiliado, pero llevo horas navegando para tratar de ver como subirlo a mi sitio y no he encontrado nada.

    1. ¿Qué quiere decir «un banner html5»? ¿Es un iframe? Si es HTML, con meterlo donde quieras en tu tema o en el contenido de una página debería ser suficiente.

  11. Hola Antonio como seria la mejor forma de obtener la url del video tengo entendido que hacer esa referencia

    src=»url/del/video.mov»

    directamente no es recomendable, estaba buscando algo asi como…

    get_template_directory_uri() . ‘/css/home.css

    que haga de la mejor manera posible para obtener la ruta tienes alguna idea ?

    1. Hola Mariano. Si el vídeo lo vas a meter en los contenidos de una entrada o página, a mano, meter la URL completa del vídeo no debería estar mal. Si el vídeo es parte de tu tema y lo mete el tema, entonces es correcto usar la función get_template_directory_uri.

Deja un comentario

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.