Advertisement
  1. Web Design
  2. WordPress

Cómo incorporar un video de Youtube en WordPress

Scroll to top
Read Time: 5 min

() translation by (you can also view the original English article)

Actualmente, el video forma una parte enorme del Internet, solamente Youtube representa más de un tercio del tráfico global en Internet. Si tu contenido no incluye algún tipo de video, ¡estás perdiendo una oportunidad!  

En este tutorial aprenderás cómo insertar, incrustar o incorporar videos en tu sitio web de WordPress, primero usando Youtube, y luego utilizando archivos de video autoalojados.

Cómo incrustar videos en WordPress

Cómo incrustar videos de Youtube en WordPress

Empezaremos con una configuración básica de WordPress, y digamos que queremos añadir un video a una publicación. En el Escritorio (Dashboard) vamos a Entradas > Todas las entradas (Posts > All Posts) y luego elegimos un publicación para editar.

Añadir un bloque de video en Gutenberg

Si estás utilizando Gutenberg (el editor predeterminado de WordPress actualmente) ve al botón Añadir un bloque (Add Block) en la parte superior izquierda del editor, haz clic en él, y luego busca el bloque de Youtube (también lo encontrarás en la categoría de bloques Incrustados [Embeds]):

Add a Gutenberg Video BlockAdd a Gutenberg Video BlockAdd a Gutenberg Video Block

Luego, en el bloque que se añade a la página, ingresa la URL del video de Youtube que quieres incrustar:

youtube urlyoutube urlyoutube url

Haz clic en Incrustar (Embed), ¡y eso es todo! Tu video de Youtube ha sido añadido a tu publicación o página de WordPress. El bloque de Gutenberg se encarga de todo el código de marcado para incorporar el video por ti.

Incorporar videos de Youtube utilizando el editor clásico

Para versiones anteriores de WordPress, o si estás utilizando el plugin Classic Editor, tendrás que abordar las cosas de manera diferente.

Ve al video de Youtube que deseas incrustrar, a continuación presiona el botón Compartir y elige el fragmento del código de incorporación (embed):

Begin by going to the Youtube video you want to embedBegin by going to the Youtube video you want to embedBegin by going to the Youtube video you want to embed

Copia todo el fragmento del código como se muestra arriba, listo para pegar en WordPress.

De vuelta en la publicación o en el editor de página de WordPress, asegúrate de estar en la vista de Texto del editor, a continuación pega el fragmento dondequiera que desees.

Más fácil aún: incrustación automática por WordPress

Independientemente de la versión del editor de WordPress que estés utilizando, la manera más fácil de añadir un video de Youtube es copiar la URL completa (debería verse más o menos así: https://www.youtube.com/watch?v=IyR_uYsRdPs) ¡y pegarla en la publicación o página de WordPress! WordPress reconocerá lo que intentas hacer e incorporará el reproductor de video por ti.

Todo esto es gracias a un protocolo llamado oEmbed. No solamente funciona para videos, sino también para las fotos de Flickr y las publicaciones de Instagram, por ejemplo. Puedes encontrar una lista de sitios web y servicios que participan en wordpress.org.

Incorporar un video o un recurso de cualquiera de estos servicios es tan fácil como con Youtube; ve al recurso de medios que quieres incorporar, ¡obtén su URL y pégala en el editor de WordPress!

embedded TED videoembedded TED videoembedded TED video

Cómo incorporar tu propio video en WordPress

¿Qué pasa si quisieras incorporar un video en WordPress que no está alojado en ninguna de estas plataformas ? Aquí es donde se complica un poco más, pero te explicaré cómo hacerlo. 

Es perfectamente factible autoalojar tus videos, pero no lo recomendaría por las siguientes razones:

  1. Rendimiento: el alojamiento de videos con tu propio proveedor puede ocupar valiosos recursos del servidor, que con frecuencia se comparten con otros sitios web.
  2. Experiencia del usuario (UX): al alojar videos tú mismo, es probable que te pierdas de todas las funciones que ofrecen plataformas como Youtube. Selección automática de la resolución de reproducción, controles del reproductor, videos recomendados, etc.
  3. Más tráfico: al momento de escribir este artículo, Youtube es el segundo sitio más visitado en la web. Subir tus videos ahí tiene mucho sentido, pues te brinda el potencial de aprovechar todo ese tráfico.

¡Aún quiero autoalojar!

Si todavía estás decidido a autoalojar tus videos, aquí tienes cómo hacerlo con WordPress.

Empieza subiendo tu video a la biblioteca de medios (ve a Escritorio > Medios > Añadir nuevo [Admin > Media > Add New]):

Begin by uploading your video to the Media LibraryBegin by uploading your video to the Media LibraryBegin by uploading your video to the Media Library

Al hacer clic en la miniatura test-video.mp4 que se ve aquí, puedo copiar la URL del video.

Instala el plugin FV Flowplayer

Ve a Plugins > Añadir nuevo (Plugins > Add New) y busca FV Flowplayer Video Player. Instálalo y actívalo. Hay bastantes plugins que hacen algo similar, pero esta es mi elección personal.

Añade el nuevo Flowplayer

Ve a FV Player > Añadir nuevo (FV Player > Add New) y añade un nuevo reproductor. Pega la URL del video que copiaste anteriormente o selecciónala desde la biblioteca.

El tamaño es detectado automáticamente y puedes añadir una imagen de bienvenida si lo deseas.

Add New FlowplayerAdd New FlowplayerAdd New Flowplayer

Pega el código corto (shortcode) en la publicación

Una vez que hayas hecho esto, copia el código corto que se te proporciona, se verá más o menos así: [fvplayer id="1"]. Luego puedes pegar eso en tu publicación de WordPress o en el editor de páginas, ¡y el reproductor quedará incorporado!

Conclusión

Si FV Flowplayer no se adapta a tus necesidades de autoalojamiento, no olvides que puedes encontrar otros plugins de reproductores de video en el repositorio de WordPress. Experimenta y mira cuál hace lo que necesitas.

Y naturalmente, siempre vale la pena pensar en utilizar una plataforma de video como Youtube o Vimeo para hacer las cosas aún más fáciles. ¡Eso concluye la forma en que puedes incorporar videos en WordPress!

Más recursos de aprendizaje de WordPress y video

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.