Cómo incrustar videos de YouTube en WordPress

YouTube es una herramienta increíblemente poderosa. Maneja el almacenamiento, la codificación, la compresión y la reproducción de videos para que no tenga que preocuparse por la compatibilidad en una cantidad cada vez mayor de navegadores y dispositivos.

Agregar videos de YouTube a WordPress es bastante simple debido a la compatibilidad con oEmbed agregada en la versión 2.9. También existen complementos que pueden ayudarlo a personalizar el aspecto de sus videos de YouTube, organizarlos en galerías y aprovechar al máximo la transmisión de medios en su sitio. En este artículo, veremos cómo incrustar videos de YouTube con WordPress listo para usar, luego pasaremos a personalizaciones más avanzadas.

Usando oEmbed

oEmbed es un formato que permite que las URL apunten automáticamente al contenido incrustado. Tomará un enlace estándar, extraerá medios de él y lo incrustará en una página web. Esto se ha integrado completamente en WordPress para varias versiones.

¿Qué quiere decir esto? No necesita nada más que la URL de un video de YouTube para agregarlo a su página. Simplemente agregue esa URL a su editor de publicaciones y el video de YouTube se mostrará en sus publicaciones.

01
02
03
04
05
Check out the features of the <a class="wpil_keyword_link" href="https://www.elegantthemes.com/gallery/divi/"   title="Divi theme" data-wpil-keyword-link="linked">Divi theme</a>.
 
[YouTube URL]
 
With lots of features to explore.

Esto también funciona con listas de reproducción. Simplemente copie la URL, y esto se incrustará automáticamente, con un menú desplegable de lista de reproducción en la parte superior del video.

En la versión más reciente de WordPress, agregar este enlace en su editor de publicaciones generará una vista previa del video. De esa manera, puede ver cómo se ve sin tener que obtener una vista previa de la publicación.

Vea su video incrustado, directamente en el editor de publicaciones

Cuando pega un enlace de YouTube, el video incrustado heredará toda la funcionalidad de compartir predeterminada, y hay muy poca capacidad para personalizar un video sin algunos filtros complejos. Esto incluye videos que se reproducen automáticamente, un ancho que normalmente llenará el contenedor en el que se encuentra, una barra de control negra y contenido relacionado al final de cada video. En muchos casos, esto será todo lo que necesita. Si no necesita personalizaciones detalladas de contenido incrustado, oEmbed funciona muy bien y es, con mucho, el más sencillo para comenzar.

Para aquellos curiosos, no son solo los videos de YouTube los que se incrustarán automáticamente con un enlace. Hay una lista de servicios con los que funcionará, incluidos Flikr, Vimeo, Hulu, Twitter y muchos más. La lista completa está en el códice de WordPress .

Uso del código abreviado de inserción

La única advertencia del método oEmbed es que la URL debe incluirse en su propia línea. Si hay otro contenido en la misma línea, se leerá como parte de la URL incrustada y encontrará un error. Sin embargo, puede evitar esto envolviendo su enlace en el código abreviado incrustado .

Extender oEmbed usando Jetpack

Para los usuarios de Jetpack, hay algunas opciones más disponibles al usar oEmbed. Estos se pueden implementar agregando una cadena al final de una URL de YouTube, que definirá las personalizaciones para su inserción. Sin embargo, lo primero que debe hacer es instalar y activar el complemento Jetpack , luego ir a Jetpack -> Configuración y hacer clic en el enlace Activar junto a «Incrustaciones de código corto». Con esto habilitado, podemos comenzar a agregar parámetros directamente a nuestra URL.

Por ejemplo, oEmbed usa un ancho y una altura predeterminados cuando incrusta un video. Sin embargo, puede elegir su propio ancho y alto agregando “w=” y “h=” al final de su URL.

01
[YouTube URL]&w=1280&h=720

Estos parámetros se agregan y se separan mediante un ampersand al final de la URL. Puede pasar tantas de estas personalizaciones a la URL como desee, y hay varias cadenas para elegir. La lista completa se encuentra en la documentación de Jetpack.

Pero para darle una idea de lo que se puede hacer, digamos que queremos comenzar nuestro video en el segundo 85, eliminar videos relacionados y usar el tema ligero de YouTube. Nuestra URL terminaría luciendo así:

01
[YouTube URL]&rel=0&start=85&theme=light

Aquí, el atributo «rel» se establece en cero para eliminar videos relacionados del final de un video. Los parámetros de «inicio» y «detención» se pueden usar para indicar en qué punto se debe reproducir un video y se mide en segundos. Por último, puede elegir el tema claro u oscuro para que coincida con el estilo de su tema.

Hay varias otras formas de personalizar cómo se incrusta un video de YouTube además de Jetpack, pero si ya lo está usando en su sitio, puede ser una forma sencilla de personalizar los videos de YouTube individualmente.

Incrustación de YouTube de Vixy

Si está ejecutando un sitio que depende en gran medida del contenido de video, es posible que necesite algo que sea un poco más robusto que lo que WordPress puede hacer de forma inmediata. Vixy YouTube Embed aprovecha todas las personalizaciones que YouTube tiene para ofrecer para que tengas más control sobre cómo se muestran las inserciones.

Vixy funciona dándote acceso a un nuevo shortcode, [youtube], que puedes usar para personalizar cada inserción. Puede elegir un ancho y una altura personalizados para los videos, apagar el audio, eliminar controles, deshacerse de videos relacionados o elegir una hora de inicio y finalización personalizada. La lista completa de parámetros está disponible en la documentación de Vixy , pero simplemente debe agregar sus parámetros al código abreviado de YouTube y luego envolverlo en la ID de video o la URL de su video.

01
02
03
[youtube width=300 height=200 autoplay=true]
[YouTube URL or ID]
[/youtube]

Vixy también le permite configurar diferentes perfiles para videos con sus propias opciones personalizadas. Entonces, un perfil puede reproducir automáticamente videos sin controles, mientras que otro puede usar un tema claro sin videos relacionados. Si configura sus perfiles, simplemente tiene que hacer referencia a ellos con el parámetro «perfil» en su código abreviado y se utilizarán las opciones seleccionadas.

Por último, Vixy te permite crear una lista de reproducción de videos que se pueden incrustar en cualquier página. Estos se mostrarán al usuario como una lista de reproducción estándar de YouTube, sin que tenga que crear una. Simplemente crea una nueva lista en el administrador de WordPress y se combinarán. Además, Vixy cuenta con soporte para incrustaciones de comentarios y agrega un widget para sus barras laterales.

Vixy ofrece una variedad de formas de personalizar sus videos y puede volverse bastante complejo. También tiene una versión pro disponible, con ajustes aún más avanzados para videos incrustados. Pero si las incrustaciones de YouTube son algo importante para su sitio, entonces este nivel de personalización puede ser necesario.

TubePress

TubePress es un complemento creado específicamente para clasificar videos de Vimeo y YouTube en galerías. TubePress le permite configurar valores predeterminados y extraer contenido de video de YouTube o Vimeo en galerías paginadas. Estos videos pueden incluir una búsqueda general, por ejemplo, «temas de WordPress», o un canal, usuario o lista de reproducción específicos. La galería se completa automáticamente con la variedad de videos que seleccionó. Usando la página de configuración de TubePress, puede personalizar el tamaño de las miniaturas, qué información debe incluirse para cada video en su galería y cómo debe verse el reproductor.

Para incluir su galería predeterminada en su sitio, solo necesita incluir el código abreviado [tubepress]. Pero también puede usar parámetros de shortcode para cambiar completamente su galería de YouTube. Esto es principalmente útil cuando necesita múltiples galerías en el mismo sitio.

TubePress tiene algunos valores predeterminados bastante inteligentes, pero permite un control detallado sobre la apariencia de sus galerías de videos. Tiene un sistema de temas si necesita un control absoluto y muchas personalizaciones con su código abreviado. Hay una versión gratuita y profesional del complemento disponible, la última de las cuales ofrece aún más control sobre el aspecto de sus galerías. Para el usuario promedio, esto será demasiado complejo, pero para cualquier usuario que necesite agregar galerías de videos inteligentes, es una gran herramienta.

Carga diferida para videos

Cuando se agrega una inserción de YouTube a su página, se cargará en bastantes archivos externos, como CSS, JavaScript e imágenes. Esto puede ralentizar significativamente su página si tiene más de un video en cada página. Lazy Load Videos es un complemento que soluciona esto cargando primero una imagen estática con un botón de reproducción y solo cargando la inserción completa de YouTube cuando un usuario hace clic en ella. Esto garantizará que todo el peso adicional de la página de un video de YouTube se cargue condicionalmente y acelerará la carga inicial de la página.

Es una solución notablemente simple y funciona automáticamente al conectarse a oEmbed. El complemento también le permite personalizar qué imagen se debe usar y el estilo y la apariencia del botón de reproducción. Y debido a que ya se conecta a incrustaciones, Lazy Load Videos también le brinda la oportunidad de personalizar el aspecto de su reproductor de video Vimeo o YouTube, aunque en menor medida que los complementos enumerados anteriormente. Mantiene las cosas simples y comienza a funcionar en el momento en que lo activa.

Aprovechar al máximo YouTube

Como bien sabes, YouTube es una plataforma omnipresente utilizada por millones de personas. También es una excelente manera de organizar, distribuir y compartir su contenido en cualquier lugar que desee. Fuera de la caja, WordPress ya tiene un gran soporte para videos incrustados. Con los consejos de este artículo, espero que tengas muchas maneras de comenzar a personalizar y aprovechar YouTube al máximo.

Imagen en miniatura del artículo por issumbosi / shutterstock.com