El bloque de Vídeo Emergente te permite incrustar contenido de vídeo de YouTube, Vimeo o una fuente autoalojada en cualquier página de SeedProd. A diferencia de un reproductor incrustado estándar, el bloque admite el modo de ventana emergente (lightbox), un vídeo fijo que sigue a los visitantes mientras se desplazan y una superposición de imagen que actúa como una miniatura personalizada, dándote control total sobre cómo los visitantes descubren e interactúan con tu vídeo.
Ya sea que estés mostrando una demostración de producto, un testimonio o un vídeo explicativo, el bloque de Vídeo Emergente ofrece opciones de reproducción avanzadas —incluyendo reproducción automática, silencio, bucle, modo de privacidad y una función de vídeo teaser— para que puedas adaptar la experiencia de visualización a los objetivos de tu página y a las preferencias de tu audiencia.
Añadir el Bloque de Vídeo Emergente a tus Páginas
Sigue estos pasos para añadir un bloque de Vídeo Emergente a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Vídeo Emergente en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Vídeo Emergente para abrir su configuración. En la pestaña Contenido, los ajustes están organizados en cuatro secciones.
Vídeo:
- Fuente: Elige tu fuente de vídeo — YouTube, Vimeo o Personalizado (para archivos de vídeo autoalojados o alojados externamente).
- URL de YouTube (solo YouTube): Introduce la URL completa del vídeo de YouTube.
- URL de Vimeo (solo Vimeo): Introduce la URL completa del vídeo de Vimeo. Nota: Vídeo Fijo requiere una cuenta de Vimeo Starter, Standard, Advanced, Plus, Pro, Business, Premium o Enterprise.
- URL Externa / URL de Vídeo Personalizado (solo Personalizado): Activa URL Externa para enlazar a un archivo de vídeo alojado, o introduce la URL directa de tu vídeo. También puedes usar Seleccionar Vídeo Personalizado para elegir un archivo de tu biblioteca de medios.
- Hora de Inicio: Especifica una hora (en segundos) donde el vídeo debe comenzar a reproducirse.
- Hora de Fin: Especifica una hora (en segundos) donde el vídeo debe dejar de reproducirse.
Opciones de Vídeo:
- Reproducción Automática: Inicia el vídeo automáticamente cuando la página se carga.
- Reproducir en Móvil: Reproduce el vídeo en línea en dispositivos móviles en lugar de entrar automáticamente en modo de pantalla completa.
- Silenciar: Inicia el vídeo en silencio para evitar interrumpir la experiencia del visitante.
- Bucle: Repite el vídeo continuamente cuando llega al final.
- Mostrar Controles del Reproductor: Muestra u oculta los controles de reproducción del reproductor de vídeo.
- Modo de Privacidad: Cuando está activado, YouTube y Vimeo no almacenarán información del visitante a menos que reproduzcan activamente el vídeo.
- Carga Diferida: Retrasa la carga del vídeo hasta que sea visible en la ventana gráfica para mejorar la velocidad de carga de la página.
- Título de Introducción / Retrato de Introducción / Nombre del Autor de Introducción (solo Vimeo): Activa la visualización del título del vídeo, el retrato del autor y el nombre del autor que se muestran en la introducción de Vimeo.
- Color de los controles (solo Vimeo): Establece el color de los controles del reproductor de Vimeo.
- Vídeos sugeridos (solo YouTube): Elige qué aparece al finalizar el vídeo: Canal del vídeo actual (vídeos relacionados del mismo canal) o Cualquier vídeo.
- Mostrar botón de descarga (solo personalizado): Muestra un botón de descarga en el reproductor de vídeo personalizado.
- Preload (solo personalizado): Establece cómo se carga el vídeo al cargar la página: Metadatos (solo carga la información del vídeo), Automático (carga el vídeo completo) o Ninguno.
- Póster: Establece una imagen de póster que se muestra antes de que comience la reproducción del vídeo.
- Activar vídeo fijo: Cuando está activado, el reproductor de vídeo se ancla en una esquina de la pantalla a medida que los visitantes se desplazan, manteniendo el vídeo visible durante toda la página.
Vídeo teaser:
- Activar vídeo teaser: Reemplaza la miniatura estática con un vídeo teaser corto en bucle que se reproduce en silencio en la página. Cuando un visitante hace clic en él, se abre el vídeo completo. Nota: Activar esta opción deshabilita la función de superposición de imagen.
- Icono de reproducción de vídeo teaser: Elige el icono que se muestra sobre el vídeo teaser para indicar que es clicable.
- Tamaño de fuente del icono: Establece el tamaño del icono de reproducción del teaser.
- Mostrar banner: Muestra un banner sobre el vídeo teaser (por ejemplo, un aviso de “Haz clic para escuchar audio”). Configura el texto del banner, el color de fondo, el color del texto, la tipografía y el icono.
Superposición de imagen:
- Activar superposición de imagen: Reemplaza la miniatura de vídeo predeterminada con una imagen personalizada. Los visitantes hacen clic en la imagen para abrir el vídeo. Nota: Activar esta opción deshabilita la función de vídeo teaser.
- Elegir imagen: Selecciona o carga la imagen de superposición desde tu biblioteca de medios.
- Tamaño de la imagen: Establece el ancho y alto de la imagen de superposición en píxeles o como un porcentaje.
- Mostrar icono de reproducción: Activa o desactiva el icono de reproducción que aparece sobre la imagen de superposición.
- Tamaño de fuente del icono: Establece el tamaño del icono de reproducción que se muestra en la imagen de superposición.
- Opacidad del icono: Establece la transparencia del icono de reproducción (escala de 0 a 10).
- Color del icono: Establece el color del icono de reproducción en la imagen de superposición.
- Activar lightbox: Cuando está activado, hacer clic en la imagen de superposición abre el vídeo en una superposición de lightbox en lugar de reproducirlo en línea.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque de ventana emergente de vídeo.
Estilos:
- Ancho: Establece el ancho del reproductor de vídeo como un porcentaje de su contenedor usando un control deslizante.
- Relación de aspecto: Elige la relación de aspecto del reproductor de vídeo: 1:1, 3:2, 4:3, 9:16, 16:9 o 21:9.
- Alineación: Establece la alineación horizontal del reproductor de vídeo (Izquierda, Centro o Derecha) con controles por dispositivo para escritorio, tableta y móvil.
- Sombra: Aplica una sombra paralela al reproductor de vídeo usando tamaños preestablecidos: Ninguna, Fina, Pequeña, Mediana, Grande, Muy grande o Extra grande.
Espaciado:
- Margen: Establece el espaciado exterior alrededor del bloque en los cuatro lados, con controles independientes para escritorio, tableta y móvil.
- Relleno: Establece el espaciado interior dentro del contenedor del bloque en los cuatro lados, con controles por dispositivo.
Atributos:
- Clase personalizada: Añade una o más clases CSS personalizadas al contenedor del bloque para una estilización específica.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puedes usarlo para referenciar el bloque en CSS o JavaScript personalizado.
- Atributos personalizados: Añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una línea nueva usando el formato clave|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Activa para ocultar el bloque cuando se ve en pantallas de escritorio.
- Ocultar en tableta: Activa para ocultar el bloque cuando se ve en pantallas de tableta.
- Ocultar en móvil: Activa para ocultar el bloque cuando se ve en pantallas móviles.
Efectos de Animación:
- Efecto de desplazamiento: Aplica una animación activada por desplazamiento al bloque, incluyendo opciones de Desplazamiento Vertical y Desplazamiento Horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto del ratón: Aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Video emergente y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has agregado con éxito un bloque de Video emergente a tu página! Con soporte para YouTube, Vimeo y video autohospedado junto con superposiciones de imágenes, vistas previas de avance, reproducción fija y modos de lightbox, este bloque te brinda todo lo que necesitas para crear una experiencia de video atractiva. Experimenta con las opciones de reproducción y la configuración de superposición para encontrar la combinación que mejor capte la atención de tus visitantes.