Video Embed Field
Proporciona un tipo de campo para mostrar videos de proveedores externos como YouTube y Vimeo.
video_embed_field
Install
composer require 'drupal/video_embed_field:^3.0'
composer require 'drupal/video_embed_field:8.x-2.6'
Overview
Video Embed Field es un módulo completo de Drupal que proporciona un tipo de campo simple pero potente para incrustar videos de servicios externos de alojamiento de videos. El módulo almacena URLs de videos y los renderiza como reproductores de video incrustados con soporte completo para miniaturas, diseños responsivos y diversas opciones de visualización.
El módulo cuenta con una arquitectura de proveedores extensible mediante plugins, lo que facilita agregar soporte para servicios adicionales de alojamiento de videos. El soporte integrado incluye YouTube (incluyendo YouTube Shorts y videos en vivo), listas de reproducción de YouTube y Vimeo. El sistema de plugins de proveedores permite a los desarrolladores crear proveedores personalizados para otros servicios de video.
Las características principales incluyen descarga automática de miniaturas desde los proveedores de video, múltiples formateadores de visualización (video incrustado, miniatura, carga diferida y modal Colorbox), soporte de video responsivo para diseños adaptados a dispositivos móviles, y soporte de índice de tiempo para iniciar videos en marcas de tiempo específicas. El módulo también incluye control de reproducción automática basado en permisos, permitiendo a los administradores desactivar la reproducción automática para roles de usuario específicos.
Los submódulos adicionales proporcionan integración con el módulo Media de Drupal para soporte de biblioteca de medios, integración con CKEditor5 para incrustar videos directamente en editores WYSIWYG, y herramientas de migración para actualizar desde versiones anteriores de Drupal o transicionar a oEmbed del core.
Features
- Proporciona un tipo de campo dedicado para almacenar URLs de video de YouTube y Vimeo
- Sistema extensible de proveedores de video que permite agregar proveedores personalizados mediante anotaciones
- Descarga y almacenamiento en caché automático de miniaturas desde proveedores de video con soporte de estilos de imagen
- Múltiples formateadores de visualización: reproductor de video incrustado, solo miniatura, carga diferida, modal Colorbox y URL simple
- Visualización de video responsiva que se escala al ancho del contenedor manteniendo una relación de aspecto 16:9
- El soporte de YouTube incluye videos regulares, YouTube Shorts, transmisiones en vivo y listas de reproducción con parámetros de índice y video inicial
- Soporte de índice de tiempo para iniciar videos en marcas de tiempo específicas (ej. ?t=1m30s)
- Soporte de preferencia de idioma para subtítulos de YouTube
- Control de reproducción automática basado en permisos que permite a roles específicos nunca ver videos con reproducción automática
- Validación de campo que asegura que solo se acepten URLs de proveedores permitidos
- Soporte de atributo title con formato personalizable incluyendo título del video y nombre del proveedor desde datos oEmbed
- Integración con el módulo Media proporcionando una fuente de medios video_embed_field
- Integración con CKEditor5 para incrustar videos directamente en editores WYSIWYG con valores predeterminados configurables
- Soporte de migración para actualizar desde Drupal 6 emfield y Drupal 7 video_embed_field
- Ruta de migración a oEmbed del core mediante comando drush
Use Cases
Agregar contenido de video a artículos
Agrega un campo Video Embed a tu tipo de contenido Artículo para permitir a los editores incluir videos incrustados de YouTube o Vimeo. Configura el formateador Video con responsivo habilitado para visualización adaptada a móviles. Establece reproducción automática en falso para mejor experiencia de usuario.
Galería de videos con miniaturas
Crea un tipo de contenido con un campo Video Embed de múltiples valores para galerías de video. Usa el formateador Miniatura para mostrar una cuadrícula de miniaturas de video enlazadas a URLs del proveedor, o usa el formateador Colorbox para abrir videos en una superposición modal sin salir de la página.
Páginas de video optimizadas para rendimiento
Usa el formateador Video (carga diferida) en páginas con múltiples videos o videos debajo del pliegue. Esto muestra miniaturas inicialmente y solo carga el iframe del video cuando los usuarios hacen clic para reproducir, mejorando significativamente el rendimiento de carga de página y reduciendo el uso de ancho de banda.
Integración con biblioteca de medios
Habilita el submódulo video_embed_media para agregar videos a tu biblioteca de medios. Crea entidades de medios de video reutilizables que pueden referenciarse desde múltiples elementos de contenido. Usa navegadores de medios e incrustación de entidades para incluir videos en contenido de texto enriquecido.
Incrustación de video WYSIWYG
Habilita el submódulo video_embed_wysiwyg para permitir a los editores de contenido incrustar videos directamente en campos de texto CKEditor5. Configura los ajustes predeterminados en la configuración del formato de texto. Los videos se renderizan con una vista previa de miniatura en el editor.
Visualización de video enfocada en accesibilidad
Otorga el permiso 'never autoplay videos' a usuarios autenticados o roles específicos para prevenir la reproducción automática independientemente de los ajustes del formateador. Usa el ajuste title_format para proporcionar títulos de iframe descriptivos para lectores de pantalla.
Migración desde Drupal 7
Usa los plugins de migración integrados para migrar contenido de video_embed_field desde Drupal 7. Los tipos de campo, formateadores y widgets se mapean automáticamente. La migración también soporta contenido del módulo emfield de Drupal 6.
Transición a oEmbed del core
Usa el submódulo vem_migrate_oembed con el comando drush vem:migrate_oembed para transicionar de video_embed_media a la implementación oEmbed del core de Drupal cuando necesites características como incrustación agnóstica de proveedor o soporte de formatos más amplio.
Tips
- Usa modo responsivo para visualización de video adaptada a móviles que mantiene relación de aspecto 16:9 en todos los tamaños de pantalla
- Otorga el permiso 'never autoplay videos' a usuarios anónimos para una experiencia pública más amigable
- Las URLs de YouTube con parámetros de tiempo (t=1m30s) son soportadas e iniciarán el video en esa marca de tiempo
- Para listas de reproducción de YouTube, incluye el parámetro &v= para especificar qué video debe reproducirse primero
- Usa el formateador de carga diferida para páginas con múltiples videos para mejorar el rendimiento
- Crea proveedores de video personalizados extendiendo ProviderPluginBase y usando la anotación @VideoEmbedProvider
- Usa hook_preprocess_video_embed_iframe__youtube para personalizar parámetros específicos de YouTube como modestbranding
- Los títulos de video se almacenan en caché desde la API oEmbed; limpia la caché para actualizar títulos después de que cambien en el proveedor
Technical Details
Admin Pages 1
/video-embed-wysiwyg/dialog/{filter_format}
Diálogo AJAX para incrustar videos en CKEditor5. Permite ingresar URL del video y configurar ajustes de visualización antes de insertar en el editor.
Permissions 1
Hooks 3
hook_preprocess_video_embed_iframe
Preprocesa iframes de video para modificar URL, parámetros de consulta, atributos o agregar clases según el proveedor.
hook_preprocess_video_embed_iframe__PROVIDER
Preprocesamiento de iframe específico del proveedor. Permite modificar parámetros de consulta para proveedores específicos como habilitar modestbranding de YouTube.
hook_video_embed_field_provider_info_alter
Altera las definiciones de plugins de proveedores de video_embed_field. Útil para eliminar o reemplazar proveedores con implementaciones personalizadas.
Drush Commands 1
drush vem:migrate_oembed
Migra contenido de video_embed_media a oEmbed del core. Convierte tipos de medios de fuente video_embed_field a oembed:video, actualiza almacenamiento de campos de video_embed_field a string, y actualiza visualizaciones de vista/formulario para usar formateadores/widgets oEmbed.
Troubleshooting 6
Asegúrate de que la URL sea de un proveedor soportado (YouTube o Vimeo) y esté en un formato reconocido. Verifica si los ajustes del campo restringen los proveedores permitidos. YouTube soporta formatos de URL watch, embed, youtu.be, shorts y live. Vimeo soporta URLs de vimeo.com y player.vimeo.com.
Las miniaturas se descargan al directorio de archivos (predeterminado: public://video_thumbnails/). Verifica los permisos de archivo en este directorio. Las URLs de miniaturas del proveedor pueden cambiar; limpia la caché y vuelve a visitar el contenido para re-descargar las miniaturas.
Verifica si el usuario que visualiza tiene el permiso 'never autoplay videos'. Las políticas del navegador también pueden bloquear la reproducción automática; la mayoría de navegadores requieren que los videos estén silenciados para que funcione la reproducción automática. El módulo automáticamente silencia los videos cuando la reproducción automática está habilitada.
El filtro Video Embed WYSIWYG debe ejecutarse ANTES de 'Convertir URLs en enlaces' y DESPUÉS de 'Limitar etiquetas HTML permitidas'. Verifica los pesos de filtro en la configuración del formato de texto. El módulo valida el orden de filtros y muestra errores si está mal configurado.
El formateador Colorbox solo aparece cuando el módulo Colorbox está instalado y habilitado. Instala vía composer require drupal/colorbox y habilita el módulo.
La URL ingresada no coincide con ningún patrón de proveedor. Verifica errores tipográficos en la URL. Se pueden agregar proveedores personalizados vía el sistema de plugins. Consulta la documentación del módulo para formatos de URL soportados.
Security Notes 5
- Los videos se incrustan vía iframes apuntando a dominios del proveedor (youtube.com, vimeo.com), no contenido subido
- El atributo title del iframe se sanitiza usando FormattableMarkup para prevenir ataques XSS
- Las URLs de video se validan contra patrones del proveedor antes de ser aceptadas
- El filtro WYSIWYG analiza tokens JSON y valida la estructura antes de renderizar para prevenir ataques de inyección
- Los archivos de miniatura se descargan al sistema de archivos local y se sirven a través del sistema de estilos de imagen de Drupal