Comparativa de opciones para embed Genially

Página de prueba — elegir la opción que prefieran para implementar en el sitio

¿Cuál es el problema actual?
Con width: 70% en el wrapper, la altura se calcula como si el contenedor fuera el 100% del ancho — generando franjas negras porque Genially no tiene exactamente proporción 16:9. Las opciones B y C resuelven esto.
Parámetros de prueba — Campo ACF del acordeón Cambiá los valores y observá el efecto en las 3 opciones
accordion_embed_width

Ancho del iframe relativo al contenedor. Acepta %, px o auto.

accordion_embed_height nuevo

Solo para Opción B. Alto fijo en píxeles del iframe.

accordion_embed_ratio nuevo

Solo para Opción C. Proporción ancho:alto del iframe.

Opción actual (A) padding-bottom: 56.25% — ratio 16:9 forzado

Ratio 16:9 fijo vía CSS

Ventajas

  • ✓ No requiere campo extra en ACF
  • ✓ Funciona perfecto para videos YouTube / Vimeo

Problemas

  • ✗ Franjas negras si Genially no es exactamente 16:9
  • ✗ La altura se calcula sobre el padre, no sobre el wrapper angosto
  • ✗ Sin control sobre el alto desde el editor
Campos ACF necesarios: solo accordion_embed_width (ya existe)
Recomendada (B) width% + height px, sin ratio forzado

Alto explícito en píxeles — nuevo campo ACF

Ventajas

  • ✓ Sin franjas negras — el alto es exacto
  • ✓ El editor controla ancho Y alto desde el panel
  • ✓ Funciona para cualquier proporción (Genially, Slides, etc.)
  • ✓ Fácil de entender: "ancho 70%, alto 520px"

Consideraciones

  • ✗ El editor debe saber el alto aproximado del contenido
  • ✗ En mobile puede quedar alto si se puso un valor grande
Campos ACF necesarios: accordion_embed_width (ya existe) + accordion_embed_height (nuevo — ejemplo: 520px)
Opción C CSS aspect-ratio — moderno y configurable

Relación de aspecto configurable

Ventajas

  • ✓ CSS moderno, más limpio que el truco de padding-bottom
  • ✓ La altura escala proporcionalmente con el ancho
  • ✓ Útil si todos los embeds tienen la misma relación

Consideraciones

  • ✗ Si Genially no es exactamente esa relación, igual aparecen franjas
  • ✗ El editor debe conocer la relación exacta de su presentación
  • ✗ Más opciones = más confusión para el editor
Campos ACF necesarios: accordion_embed_width (ya existe) + accordion_embed_ratio (nuevo — ejemplo: 16/10, 4/3, 16/9)

Resumen comparativo

Criterio A — Actual B — Recomendada C — Ratio CSS
Sin franjas negras — ✓ Depende
Sin cambios en ACF ✓ — —
Control total del alto — ✓ Parcial
Responsive en mobile ✓ Parcial ✓
Fácil para el editor ✓ ✓ Medio
Funciona para videos YouTube ✓ ✓ ✓

Contacto

Proyecto ECHO Uruguay

Facultad de Medicina | Universidad de la República
Av. Italia s/n, piso 4. Montevideo, Uruguay
C.P. 11600
Tel: 1953 int. 4593

proyecto@echo.fmed.edu.uy
Soporte técnico: soporte@echo.fmed.edu.uy