URL Embed
Permite incrustar URLs utilizando un editor de texto (CKEditor5) o campos de enlace, soportando servicios compatibles con oEmbed como YouTube, Flickr, Instagram y Facebook.
url_embed
Install
composer require 'drupal/url_embed:^3.0'
Overview
El módulo URL Embed proporciona una solución completa para incrustar URLs externas en contenido de Drupal. Aprovecha la potente biblioteca PHP oscarotero/Embed para obtener datos oEmbed de cientos de proveedores compatibles, incluyendo YouTube, Vimeo, Flickr, Twitter, Instagram, Facebook y muchos más.
El módulo se integra perfectamente con CKEditor5, añadiendo un botón en la barra de herramientas que abre un diálogo donde los usuarios pueden pegar URLs para incrustar. Cuando se muestra el contenido, el filtro de texto del módulo transforma las etiquetas de marcador <drupal-url> en contenido incrustado enriquecido como reproductores de video, galerías de imágenes o publicaciones de redes sociales.
Además, URL Embed proporciona un formateador de campo para campos Link, permitiendo que el contenido incrustado se muestre en cualquier lugar donde se utilicen campos de enlace sin requerir un editor WYSIWYG. El módulo también soporta incrustaciones responsivas que se escalan automáticamente para ajustarse a su contenedor mientras mantienen la proporción de aspecto correcta.
Features
- Integración con CKEditor5 con botón en la barra de herramientas para incrustar URLs en contenido WYSIWYG
- Filtro de texto para mostrar URLs incrustadas que transforma etiquetas <drupal-url> en contenido incrustado enriquecido
- Filtro de texto para convertir URLs en incrustaciones de URL que detecta y convierte automáticamente URLs simples en elementos incrustados
- Formateador de campo para campos Link para mostrar URLs como contenido incrustado
- Soporte de incrustación responsiva con preservación de proporción de aspecto basada en CSS
- Soporte para incrustación de Facebook e Instagram mediante configuración de credenciales de Facebook App
- Arquitectura extensible que permite a otros módulos modificar las opciones de incrustación mediante hook_url_embed_options_alter
- Soporte para cientos de proveedores oEmbed a través de la biblioteca oscarotero/Embed
Use Cases
Incrustar Videos de YouTube en el Contenido
Los editores de contenido pueden incrustar fácilmente videos de YouTube haciendo clic en el botón URL Embed en CKEditor5, pegando una URL de YouTube y haciendo clic en Incrustar. El reproductor de video se renderizará en línea en el contenido con escalado responsivo apropiado.
Mostrar Publicaciones de Redes Sociales
Incrusta publicaciones de Twitter/X, fotos de Instagram o contenido de Facebook directamente en los artículos. Para Instagram y Facebook, configura primero las credenciales de Facebook App en la configuración del módulo.
Campo Link como Contenido Incrustado
Usa el formateador de campo 'URL Incrustada' en campos Link para mostrar URLs como contenido incrustado. Por ejemplo, un campo de enlace 'Video Destacado' puede mostrarse automáticamente como un reproductor de video en lugar de un enlace simple.
Auto-conversión de URLs en Contenido de Usuario
Habilita el filtro 'Convertir URLs en incrustaciones de URL' para convertir automáticamente URLs simples en contenido enviado por usuarios a medios incrustados. Opcionalmente usa un prefijo como 'EMBED-' para controlar qué URLs se convierten.
Galerías de Medios Responsivas
Habilita la incrustación responsiva para asegurar que todos los medios incrustados se escalen correctamente en dispositivos móviles y diferentes tamaños de pantalla mientras mantienen las proporciones de aspecto correctas.
Tips
- Coloca el filtro 'Display embedded URLs' después del filtro 'Limit allowed HTML tags' en el orden de procesamiento de filtros para evitar que el marcado de incrustación sea eliminado.
- Usa el filtro 'Convert URLs to URL embeds' con un prefijo de URL como 'EMBED-' para dar a los editores de contenido control sobre qué URLs se convierten en incrustaciones.
- La configuración de proporción de aspecto predeterminada (66.7%) aproxima una proporción 3:2. Usa 56.25% para contenido de video 16:9.
- Prueba las URLs de incrustación antes de publicar usando la funcionalidad de vista previa de CKEditor5 o visualizando en modo borrador.
- Para sitios de alto tráfico, considera estrategias de caché para contenido incrustado ya que cada vista de página puede obtener datos oEmbed frescos.
Technical Details
Admin Pages 1
/admin/config/media/url_embed
Página de configuración del módulo URL Embed. Se utiliza principalmente para configurar las credenciales de Facebook App requeridas para incrustar contenido de Facebook e Instagram desde octubre de 2020.
Permissions 1
Hooks 1
hook_url_embed_options_alter
Permite a los módulos modificar la URL o las opciones pasadas a la solicitud de incrustación antes de que se envíe al proveedor oEmbed. Útil para personalizar el comportamiento de incrustación por proveedor.
Troubleshooting 5
Facebook e Instagram requieren una Facebook App con el producto oEmbed habilitado desde octubre de 2020. Crea una aplicación en developers.facebook.com, habilita el producto oEmbed e ingresa tu App ID y App Secret en /admin/config/media/url_embed. La aplicación debe estar en modo 'Live'.
Asegúrate de haber añadido el botón 'urlembed' a la configuración de la barra de herramientas de tu formato de texto en /admin/config/content/formats. También verifica que el filtro 'Display embedded URLs' esté habilitado para ese formato de texto.
No todas las URLs soportan oEmbed. La URL debe ser de un proveedor soportado por la biblioteca oscarotero/Embed. Revisa la consola del navegador y los logs de Drupal para mensajes de error específicos.
Habilita la opción 'Embeds fill container (responsive behavior)' en la configuración del filtro de texto o en la configuración del formateador de campo. También asegúrate de que el CSS de la biblioteca url_embed/responsive_styles se esté cargando.
Si usas el filtro 'Limit allowed HTML tags', asegúrate de que <drupal-url data-embed-url data-url-provider> esté en la lista de etiquetas permitidas. El filtro Display embedded URLs debe ejecutarse después del filtro de restricción HTML.
Security Notes 3
- El App Secret de Facebook se almacena en texto plano en la configuración de Drupal. Restringe el acceso a la exportación de configuración y a las páginas de administración.
- El contenido incrustado se renderiza usando el HTML sin procesar de los proveedores oEmbed. Esto es generalmente seguro ya que los proveedores oEmbed son de confianza, pero ten en cuenta que pueden cargarse scripts externos.
- El permiso 'administer url_embed' solo debe otorgarse a administradores de confianza ya que permite configurar credenciales de API.