WordPress facilita la creación de páginas atractivas y multimedia al incrustar automáticamente contenido de terceros como videos de YouTube y Tweets.
Sin embargo, después de trabajar estrechamente con los usuarios de WordPress durante los últimos 15 años, una lección que aprendimos es que los oEmbeds también pueden causar problemas. Imagina un video de YouTube que desborda su contenedor y empuja todo tu texto a un lado, o fuerza tu botón de llamada a la acción más abajo en la pantalla.
Ahí es donde entra en juego la configuración de un ancho máximo para los oEmbeds. Te permite tomar el control y asegurar que tu contenido incrustado se ajuste perfectamente al diseño de tu sitio web.
En este artículo, te mostraremos cómo establecer el ancho máximo de oEmbed en WordPress para que tengas control total sobre el diseño de tu sitio.
¿Por qué corregir el ancho máximo de OEmbed en WordPress?
WordPress admite oEmbed, lo que te permite incrustar automáticamente contenido de sitios web de terceros. Por ejemplo, puedes incrustar fácilmente videos de YouTube, presentaciones de SlideShare, tweets y muchos otros tipos de contenido.
Este contenido no está alojado en tu servidor, por lo que no ralentizará tu sitio web. En particular, siempre debes usar tecnologías como oEmbed, y nunca subir un video a WordPress.
Nota: Aunque Facebook e Instagram admitían oEmbed en el pasado, Meta ha eliminado el soporte para oEmbed. Para obtener instrucciones paso a paso sobre cómo reparar esta función, consulta nuestra guía sobre cómo solucionar el problema de oEmbed de Facebook e Instagram en WordPress.
WordPress siempre intentará ajustar el ancho del contenido incrustado para que encaje perfectamente en el espacio disponible. Sin embargo, a veces el contenido incrustado puede ser demasiado ancho y solaparse con otras áreas de contenido de tu sitio web.
Desafortunadamente, no puedes establecer un ancho máximo para las incrustaciones de terceros utilizando las herramientas integradas de WordPress.
Dicho esto, veamos cómo puedes añadir esta función que falta y establecer un ancho máximo de oEmbed en WordPress. Simplemente utiliza los enlaces rápidos a continuación para saltar directamente al método que deseas usar:
- Método 1: Usar el Shortcode de Incrustación (Mejor para videos de YouTube)
- Método 2: Usar los Bloques de Incrustación integrados de WordPress (Fácil)
- Método 3: Usar PHP personalizado (Establecer un ancho máximo para todas las incrustaciones)
- Método 4: Usar CSS (Establecer ancho máximo para tipos de incrustación específicos)
- Consejo adicional: Cómo añadir fácilmente tus feeds de redes sociales a WordPress
Método 1: Usar el Shortcode de Incrustación (Mejor para videos de YouTube)
Puedes establecer un ancho máximo usando un shortcode. Este método es fácil, especialmente si solo quieres establecer el ancho máximo para un número pequeño de publicaciones. También hemos descubierto que este método funciona bien para incrustar videos en publicaciones de blog de WordPress.
Sin embargo, el shortcode de incrustación y sus parámetros de ancho y alto no funcionan para todos los proveedores de oEmbed. Por ejemplo, no puedes usarlo para establecer el alto y ancho de una incrustación de Giphy en WordPress. En ese caso, puedes intentar uno de los otros métodos mencionados a continuación.
En lugar de pegar la URL en el editor de publicaciones, necesitarás crear un bloque de shortcode. Luego puedes agregar parámetros de ancho y alto al código de incrustación.
Por ejemplo, simplemente necesitas envolver lo siguiente en etiquetas embed:
width="900" height="600"]https://www.youtube.com/watch?v=6LwWumPeues
Simplemente cambia los valores de ancho y alto para que se adapten a tus propias necesidades y reemplaza la URL con el contenido que deseas incrustar.
Cuando estés satisfecho con la página, simplemente haz clic en 'Actualizar' o 'Publicar'.
El contenido incrustado ahora debería encajar perfectamente en el espacio disponible.
Método 2: Usar los Bloques de Incrustación integrados de WordPress (Fácil)
El editor de bloques de WordPress viene con varios bloques de incrustación para diferentes servicios oEmbed, como bloques para Twitter, transmisiones en vivo de YouTube y videos, y incrustaciones de SoundCloud.
Algunos de estos bloques te permiten cambiar la alineación de la incrustación y establecer el contenido en 'Ancho amplio' o 'Ancho completo'.
Si eliges ancho completo, el bloque de incrustación y el contenido incrustado ocuparán todo el ancho de la pantalla. Si eliges ancho amplio, el bloque de incrustación ocupará todo el ancho, pero el contenido mantendrá el mismo tamaño.
El resultado final puede variar según tu tema de WordPress. Sin embargo, este es un método rápido y fácil, por lo que vale la pena ver si funciona para tu sitio web de WordPress.
Simplemente haz clic en el botón 'Alinear' en la pequeña barra de herramientas encima del bloque. Luego, selecciona 'Ancho amplio' o 'Ancho completo'.
Si esto soluciona el problema del ancho máximo para la incrustación, puedes continuar y publicar la página. Si no estás satisfecho con cómo se ve, deberás probar un método diferente.
Método 3: Usar PHP personalizado (Establecer un ancho máximo para todas las incrustaciones)
A veces, es posible que desees establecer un ancho máximo para todo el contenido incrustado. La forma más fácil de hacerlo es agregando código personalizado a tu sitio web de WordPress.
El problema con este método es que el atributo de ancho máximo solo funcionará si el contenido incrustado no tiene ya un 'ancho' definido. Si el código de incrustación ya incluye su propio atributo de 'ancho', entonces este método podría no funcionar.
Si no has editado el código de tu sitio antes, echa un vistazo a nuestra guía sobre cómo agregar fácilmente fragmentos de código personalizados en WordPress.
Algunas guías te piden que edites los archivos del tema manualmente, pero esto puede causar todo tipo de errores e incluso puede dañar completamente tu sitio web.
Por esa razón, recomendamos usar WPCode. Facilita la adición de fragmentos de código en WordPress sin tener que editar los archivos de tu tema. De esa manera, puedes actualizar o cambiar tu tema sin perder todas tus funciones de código personalizadas.
WPCode también viene con una biblioteca de fragmentos de código preconfigurados, que incluye un fragmento de código para 'Establecer ancho máximo de oEmbed'. Esto te permite especificar un ancho y alto máximos para tus oEmbeds.
Primero, necesitarás instalar y activar el plugin gratuito WPCode. Para más información, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Después de la activación, navega a Fragmentos de código » Biblioteca en tu panel de administración de WordPress.
Aquí, puedes buscar 'Establecer ancho máximo de oEmbed' y pasar el mouse sobre el resultado con el mismo nombre.
Luego puedes hacer clic en 'Usar fragmento'.
WPCode te llevará a la página 'Editar fragmento', donde el plugin ya ha configurado todo por ti.
Aquí, notarás el siguiente fragmento de código listo para usar:
function wpcode_snippet_oembed_defaults( $sizes ) {
return array(
'width' => 400,
'height' => 280,
);
}
add_filter( 'embed_defaults', 'wpcode_snippet_oembed_defaults' );
Por defecto, esto establece el ancho máximo en ‘400’ y la altura máxima en ‘280’. No olvides ajustar los atributos de altura y ancho según tus necesidades.
Finalmente, haz clic en el control deslizante ‘Inactivo’ para que muestre ‘Activo’. Luego, simplemente haz clic en el botón ‘Guardar fragmento’ o ‘Actualizar’ para que el fragmento de código se active.
Método 4: Usar CSS (Establecer ancho máximo para tipos de incrustación específicos)
Por defecto, WordPress agrega automáticamente clases CSS a diferentes áreas de tu sitio.
También agrega varias clases CSS a los bloques incrustados. Puedes usar estas clases CSS para establecer un ancho máximo para las incrustaciones en tu blog de WordPress.
Esta es una buena opción si deseas establecer un tamaño máximo para un tipo específico de incrustación, como tuits incrustados. También te permite crear un tamaño máximo para todo el contenido incrustado, independientemente del tipo.
Para averiguar a qué clases CSS necesitas apuntar, simplemente incrusta contenido en una publicación o página y luego previsualízala en tu navegador.
Luego, coloca el cursor del mouse sobre el contenido incrustado y haz clic derecho. En el menú que aparece, selecciona la herramienta ‘Inspeccionar’.
Esto abre un nuevo panel que muestra todas las clases CSS que WordPress agregó al contenido incrustado. Puedes usar estas clases para establecer un ancho máximo para este tipo de incrustación.
Para apuntar a un proveedor de oEmbed específico, normalmente usarás .wp-block-embed-providername, así que busca esta clase en el panel.
Por ejemplo, en la siguiente imagen, hemos subrayado la clase .wp-block-embed-providername . En esta línea, también podemos ver una clase .wp-block-embed-pinterest.
Puedes establecer un ancho máximo solo para las incrustaciones de Pinterest usando la clase .wp-block-embed-pinterest.
Por ejemplo:
.wp-block-embed-pinterest {
max-width: 900px!important;
}
Solo ten en cuenta que es posible que necesites reemplazar .wp-block-embed-pinterest con una clase CSS diferente, dependiendo del contenido al que quieras apuntar.
Si deseas establecer un ancho máximo para todas las incrustaciones, puedes usar el siguiente fragmento:
.wp-block-embed {
max-width: 900px!important;
}
La forma más fácil de agregar CSS personalizado a tu sitio web es usando WPCode. Simplemente crea un nuevo fragmento personalizado siguiendo el mismo proceso descrito anteriormente.
Sin embargo, esta vez abre el menú desplegable ‘Tipo de código’ y selecciona ‘Fragmento CSS’.
Ahora puedes guardar y publicar este fragmento de la misma manera que haces que cualquier fragmento de WPCode esté activo.
Con eso hecho, WordPress usará este valor como el tamaño máximo para tus incrustaciones.
Consejo extra: Cómo agregar fácilmente tus feeds de redes sociales a WordPress
Si incrustas contenido de plataformas de redes sociales con regularidad, puedes ahorrar mucho tiempo y esfuerzo usando Smash Balloon.
Smash Balloon es el mejor plugin de redes sociales para WordPress y te permite agregar fácilmente tus feeds de redes sociales a un sitio web de WordPress.
Soporta todos los embeds populares de redes sociales, incluyendo YouTube, Twitter, Instagram y videos de TikTok.
Más importante aún, Smash Balloon es responsive para móviles y funciona con cualquier tema de WordPress, por lo que tu contenido incrustado siempre se verá genial.
Esperamos que este artículo te haya ayudado a aprender cómo establecer un ancho máximo de oEmbed en WordPress. También te puede interesar nuestra guía sobre cómo incrustar código iFrame fácilmente en WordPress, o nuestra comparación experta del mejor software de chat en vivo para pequeñas empresas.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Andreu
El problema de esto es que también hace que el ancho máximo de las imágenes sea del tamaño definido. ¿Qué puedo hacer si quiero limitar el ancho del embed en el editor pero no el de la imagen? Gracias
Joe Daniel
Gracias. He estado luchando con esto durante semanas... funciona para WP 4.0 con el tema Genesis
digg
Hola, me funciona perfectamente.
Pero esto afecta al sitio en general, que tiene diferentes anchos ya que hay páginas de ancho completo, con barras laterales o foros, etc.
¿Es posible discriminar esto para que afecte solo a las páginas del foro de bbpress?
¡Será muy útil, gracias!
Ajit Kumar
Para cualquiera que no pueda hacer que esto funcione o si los videos de YouTube y otro contenido iframe no se redimensionan, necesitará agregar el siguiente código a su style.css
/* Asegúrate de que los embeds y iframes se ajusten a sus contenedores */
embed,
iframe,
object {
max-width: 100%;
}
¡Espero que esto ayude! Y Syed, ¡gracias por la excelente publicación!
Waymond
¡Gracias por publicar la solución!
Abhishek Sachan
no funciona
Dj
¡GRACIAS! Esto me estaba volviendo loco.
Anto (@imanto)
No puedes usar iframe, object, embed { max-width: 100%; height:auto;} sí, ajusta el ancho correctamente y hace que el video sea responsivo, pero no arregla la altura al verlo en el navegador.
¿Hay realmente una forma de hacer esto? He intentado casi todo, incluso fitvids no funciona porque estás estableciendo un ancho base en px en las funciones, pero muestra ese ancho en el móvil, luego cuando intentas corregirlo con max-width, la altura se desajusta incluso en el navegador...
¿Estoy pensando en media queries o algo así? Uf, estoy agotado.
Amir
¡Funciona perfecto, muchas gracias!
Pierre Dickinson
Hola, gracias por el consejo, pero no funciona, aquí tienes lo que necesitas en tu archivo function.php:
add_filter(’embed_defaults’,’yourthemename_embed_defaults’);
function yourthemename_embed_defaults($defaults) {
$defaults[‘width’]=600; // o lo que quieras
$defaults[‘height’]=360; // o lo que quieras
return $defaults;
}
¡funciona genial!
Saludos,
Filip Kojic
Este código no funciona bien. Pongo el nombre de mi tema y el tema solo se bloquea.
Valerie
No estoy seguro de si el otro comentarista se dio cuenta, pero el código tiene comillas rizadas y rompería un sitio. Voy a probar aquí para ver si los envoltorios de shortcode evitan el cambio que rompió el código...
add_filter('embed_defaults','yourthemename_embed_defaults');John Cronin
Estoy intentando publicar una película de animación de alta gama de YouTube en mi blog de WordPress. La parte inferior del marco se corta en la vista previa. Una vez que se hace clic en la flecha de reproducción, este problema desaparece. Pero el cineasta está comprensiblemente descontento de que la vista previa en la publicación dé la apariencia de un error. Ajustar la altura y el ancho en el código de la publicación funciona, pero no resuelve el problema. ¿Ideas?
Colin
Funcionó a la perfección – ¡gracias!
Ryan Silver
Hola,
Usé tu solución para el ancho y funcionó genial. Pero, ¿cómo configuro la altura ahora? ¿Es solo lo mismo if ( ! isset( $content_width ) ) $content_width = 560; pero con la palabra 'width' reemplazada por la palabra 'height'? Lo intenté y no funcionó....
Personal editorial
La altura se determina automáticamente para que coincida con la relación 16:9.
Administrador
FIlip Kojic
Parece que es 16:10. Aquí hay un ejemplo:
How can I change height. Please someone answer.
Jasmine Ham
¡Genial, está funcionando! ¿Pero qué pasa si necesito que sea adaptable? ¿Alguna idea para hacer eso?
josef
Hola, ¿Hay alguna forma de forzar que todos los iframes del sitio tengan un 100% de ancho? No solo los de YouTube. Tengo alrededor de 300 iframes y todos de tamaño fijo, así que... gracias de antemano. Josef
josef
Hola, ¿Hay alguna forma de forzar que todos los iframes del sitio tengan un 100% de ancho? No solo los de YouTube. Tengo alrededor de 300 iframes y todos de tamaño fijo, así que...
Ryan
Agregué este código a mi functions.php pero no hizo ninguna diferencia, y supongo que es porque mi tema no define $content_width.
Veo el enlace al codex sobre cómo definirlo, pero no soy desarrollador ni tengo uno a mano; ¿cómo se agrega una definición de $content_width a un tema? ¿Dónde va? ¡Gracias!
Justin Germino
Esto funcionó perfectamente, ¿hay alguna forma de forzar y establecer por defecto el video en calidad HD en lugar de calidad SD que parece ser la predeterminada, aunque en mi configuración de YouTube lo tengo configurado para que sea HD por defecto?
Personal editorial
¿Cuál es tu ancho máximo? He leído en el pasado que Youtube ajusta la calidad según el ancho del iframe.
Administrador
Grant Norwood
Tenga en cuenta que la variable $content_width debe declararse como global antes de que esta corrección funcione.
Nigel Parry
WP parece ser actualizado por personas que no tienen claro la centralidad del contenido multimedia en Internet. No sé por qué esta preferencia básica requeriría intervención de código. WP claramente no podía saber cuán anchos eran mis columnas. De todos modos, todo arreglado ahora. Ustedes son geniales.
Personal editorial
Bueno Nigel, hay más. Están tratando de hacer que WordPress sea más fácil de usar para los "usuarios". Con el tiempo, WordPress ha agregado una opción tras otra. Esto se vuelve realmente aterrador para los nuevos usuarios. Es por eso que van por la ruta de "decisiones sobre opciones". La esperanza con este ancho máximo de oEmbed es que cada diseñador de temas lo defina en sus temas, para que el usuario final no tenga que preocuparse por ello.
Administrador
Alex Leonard
¡Gracias! Estaba un poco desconcertado sobre a dónde había ido la configuración de incrustación de medios.
Azad
Hola
Gracias por tu publicación.
Pero no puedo hacer que esto funcione, escribí la otra publicación que mencionaste en los comentarios. Pero todavía no puedo hacer que funcione, puse esto:
Al principio de mi functions.php, pero luego todo mi sitio dejó de funcionar. todo se puso blanco, tuve que editar el archivo a través de ftp para que volviera a funcionar.
¿Qué estoy haciendo mal?
¡Gracias!
Azad
Hey
I got it working, thanks!
Monica
Hola, ¿dónde en el archivo functions.php se debe colocar este código?
Personal editorial
Puedes pegarlo al principio o al final, siempre y cuando sea independiente de otras funciones. Aquí tienes un artículo sobre eso:
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Administrador
Jesse Garnier
¿Qué valor sería apropiado para $content_width para un diseño de ancho variable o adaptable?
Personal editorial
Para un diseño adaptable, probablemente querrás usar fitvid.js o algo similar para redimensionar tus videos.
Administrador
Paul Lumsdaine
Pude hacer que la adaptabilidad funcionara de alguna manera estableciendo un max-width: 100% en mis iframes en CSS. Por supuesto, la altura se establece automáticamente dependiendo del ancho de tu contenido, pero esto al menos debería hacer que funcione correctamente sin usar ningún JS adicional. Fitvid es el camino a seguir, pero esto me funcionó.
Jeremy Myers
Paul,
¿Puedes incluir el CSS que usaste para establecer el ancho de tu iframe al 100%?
Roman
Uso este código CSS para diseño adaptable:
iframe, object, embed { max-width: 100%; } (si quieres puedes agregar -> height: auto)
Tevya
Desafortunadamente, el CSS de Roman o no funciona en algunos temas o no funciona con el nuevo reproductor multimedia de WP 3.6 que está integrado en el núcleo. Lo acabo de probar y nada. Estoy intentando conseguir un tema que sea adaptable para mantener también el nuevo reproductor de WP 3.6 adaptable, pero hasta ahora no he tenido suerte. El tema 2012 parece manejarlo muy bien, pero no logro entender qué están haciendo diferente a este tema con el que estoy trabajando.
Melanie
Soy un novato en WP y codificación, con eso dicho no estoy seguro de dónde poner el código “if ( ! isset( $content_width ) ) $content_width = 600;” Fui al archivo function.php en mi tema Suffusion y no estoy seguro de dónde insertar exactamente este código. Intenté en varios lugares donde mencionaba el adjunto de video y no está funcionando. En mi caso, los videos incrustados ahora son demasiado grandes para mi tema desde que actualicé a WP 3.5.
Personal editorial
Cambia el número 600 para que coincida con el tamaño de tu tema. Si es demasiado grande para tu tema, hazlo más pequeño.
Administrador
Jessi Linh
¡Ha sido lanzado en el momento justo! El nombre “Elvin” también es muy especial. Gracias por tu publicación.
Edward Caissie
Esta es parte de la razón por la que establecer un valor apropiado de $content_width es un requisito según las pautas de revisión de temas de WordPress (http://codex.wordpress.org/Theme_Review#Required_Hooks_and_Navigation)
Personal editorial
Sí, totalmente de acuerdo contigo. Solo los temas mal codificados no tendrán eso. Pero hay muchos de esos por ahí. Un tema que uno de nuestros clientes estaba usando tenía esa pieza faltante. En general, es un buen tema.
Administrador
Devin
Momento perfecto. ¡Gracias!