El bloque Video Pop Up te permite incrustar contenido de vídeo de YouTube, Vimeo o una fuente autohospedada en cualquier página de SeedProd. A diferencia de un reproductor incrustado estándar, el bloque admite un modo lightbox, un vídeo fijo que sigue a los visitantes mientras se desplazan y una superposición de imágenes que actúa como una miniatura personalizada, lo que te ofrece un 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 Video Pop Up ofrece opciones de reproducción avanzadas, como reproducción automática, silencio, bucle, modo privado y una función de vídeo teaser, para que puedas personalizar la experiencia de visualización y adaptarla a los objetivos de tu página y a las preferencias de tu público.
Añadir el bloque emergente de vídeo a tus páginas
Sigue estos pasos para añadir un bloque de ventana emergente de vídeo a tu página SeedProd:
Paso 1: Añadir el bloque
En Diseño > Bloques, arrastra y suelta el bloque Ventana emergente de vídeo 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 Ventana emergente de vídeo para abrir su configuración. En la pestaña Contenido, la configuración está organizada en cuatro secciones.
Vídeo:
- Fuente: Elige la fuente de tu vídeo: YouTube, Vimeo o Personalizada (para archivos de vídeo alojados en tu propio servidor o en un servidor externo).
- 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: Sticky Video requiere una cuenta Starter, Standard, Advanced, Plus, Pro, Business, Premium o Enterprise de Vimeo.
- URL externa / URL de vídeo personalizada (solo personalizada): Active la URL externa para enlazar con un archivo de vídeo alojado o introduzca la URL directa de su vídeo. También puede utilizar Seleccionar vídeo personalizado para elegir un archivo de su biblioteca multimedia.
- Hora de inicio: especifique una hora (en segundos) en la que debe comenzar la reproducción del vídeo.
- Hora de finalización: especifique una hora (en segundos) en la que el vídeo debe dejar de reproducirse.
Opciones de vídeo:
- Reproducción automática: Iniciar automáticamente el vídeo cuando se carga la página.
- Reproducir en dispositivos móviles: Reproduzca el vídeo en línea en dispositivos móviles en lugar de entrar automáticamente en modo de pantalla completa.
- Silenciar: Inicie el vídeo en silencio para no perturbar la experiencia del visitante.
- Bucle: Reproduce el vídeo en bucle de forma continua cuando llegue al final.
- Mostrar controles del reproductor: muestra u oculta los controles de reproducción del reproductor de vídeo.
- Modo privado: cuando está activado, YouTube y Vimeo no almacenarán información sobre los visitantes a menos que reproduzcan activamente el vídeo.
- Carga diferida: aplaza 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 / Firma de introducción (solo Vimeo): Activa o desactiva la visualización del título del vídeo, el retrato del autor y la firma del autor que se muestran en la introducción de Vimeo.
- Controles de color (solo Vimeo): establece el color de los controles del reproductor de Vimeo.
- Vídeos sugeridos (solo YouTube): Elige lo que aparece después de que finaliza el vídeo: Canal de 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.
- Precarga (solo personalizada): configura 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 mostrará antes de que comience la reproducción del vídeo.
- Habilitar vídeo fijo: cuando está habilitado, el reproductor de vídeo se acopla a una esquina de la pantalla cuando los visitantes se desplazan por ella, manteniendo el vídeo visible en toda la página.
Vídeo promocional:
- Habilitar vídeo teaser: sustituye la miniatura estática por un breve vídeo teaser 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: al habilitar esta opción, se deshabilita la función de superposición de imágenes.
- Icono de reproducción del vídeo teaser: Elige el icono que se muestra sobre el vídeo teaser para indicar que se puede hacer clic en él.
- Tamaño 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 mensaje que diga «Haga clic para escuchar el audio»). Configura el texto del banner, el color de fondo, el color del texto, la tipografía y el icono.
Superposición de imágenes:
- Habilitar superposición de imagen: Reemplaza la miniatura predeterminada del vídeo por una imagen personalizada. Los visitantes hacen clic en la imagen para abrir el vídeo. Nota: Al habilitar esta opción, se deshabilita la función Vídeo teaser.
- Seleccionar imagen: Seleccione o cargue la imagen superpuesta desde su biblioteca multimedia.
- Tamaño de la imagen: Establezca el ancho y el alto de la imagen superpuesta en píxeles o en porcentaje.
- Mostrar icono de reproducción: Activa o desactiva el icono de reproducción que aparece sobre la imagen superpuesta.
- Tamaño de la fuente del icono: Establece el tamaño del icono de reproducción que se muestra en la imagen superpuesta.
- 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 superpuesta.
- Habilitar Lightbox: Cuando está habilitado, al hacer clic en la imagen superpuesta, el vídeo se abre en una ventana emergente en lugar de reproducirse en línea.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque Ventana emergente de vídeo.
Estilos:
- Ancho: Establezca el ancho del reproductor de vídeo como porcentaje de su contenedor utilizando 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: Establezca la alineación horizontal del reproductor de vídeo (izquierda, centro o derecha) con controles específicos para cada dispositivo: ordenador, tableta y móvil.
- Sombra: Aplica una sombra de cuadro al reproductor de vídeo utilizando tamaños preestablecidos: Ninguno, Fino, Pequeño, Mediano, Grande, Extragrande o 2X Grande.
Espaciado:
- Margen: establece el espacio exterior alrededor del bloque en los cuatro lados, con controles independientes para ordenador, 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 aplicar un estilo específico.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puede utilizarlo para hacer referencia al bloque en CSS o JavaScript personalizados.
- Atributos personalizados: añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato clave|valor.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Activa esta opción para ocultar el bloque cuando se vea en pantallas de escritorio.
- Ocultar en tableta: Activa esta opción para ocultar el bloque cuando se vea en pantallas de tableta.
- Ocultar en dispositivos móviles: Activa esta opción para ocultar el bloque cuando se vea en pantallas de dispositivos móviles.
Efectos de animación:
- Efecto de desplazamiento: aplica una animación activada por desplazamiento al bloque, incluyendo opciones de desplazamiento vertical y horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto ratón: aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Ventana emergente de vídeo y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de ventana emergente de vídeo a tu página! Con compatibilidad con YouTube, Vimeo y vídeos autohospedados, además de superposiciones de imágenes, avances, reproducción fija y modos de caja de luz, este bloque te ofrece todo lo que necesitas para crear una experiencia de vídeo 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.