DocumentaciónCommercePage Builder

Medios: vídeo

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Principiante
  • Intermedio
  • Usuario

Utilice el tipo de contenido Video para agregar un vídeo alojado en YouTube o Vimeo al Page Builder escenario. Es fácil incrustar vídeo en una página o bloque, o en las descripciones de productos y categorías.

Vídeo en la página principal de la tienda

NOTE
Si está realizando cambios significativos en el contenido de Page Builder, se recomienda aumentar la Duración de la sesión de administrador para evitar que se agote el tiempo de espera de la sesión mientras trabaja.

Cuadro de herramientas de vídeo

Cuadro de herramientas de vídeo

Herramienta
Icono
Descripción
Mover
Icono de mover {width="25"}
Mueve el vídeo a otra posición del escenario.
(etiqueta)
Video
Identifica el contenedor de contenido actual como un vídeo. Pase el ratón sobre el contenedor de imágenes para ver el cuadro de herramientas.
Configuración
Icono de configuración {width="25"}
Abre la página Edit Video, donde puede cambiar las propiedades del vídeo y del contenedor.
Hide
Ocultar icono {width="25"}
Oculta el vídeo actual.
Mostrar
Mostrar icono {width="25"}
Muestra el vídeo oculto.
Duplicar
Icono duplicado {width="25"}
Realiza una copia del vídeo.
Eliminar
Quitar icono {width="25"}
Elimina el vídeo del escenario.
NOTE
Los elementos ocultos se almacenan en la base de datos y son invisibles para los clientes. Sin embargo, estos elementos son visibles para los motores de búsqueda y otros bots que rastrean el sitio. También se devuelven como parte del contenido si se solicitan a través de una llamada de API con un atributo de invisibilidad, a menos que los elimine del escenario.

Añadir un vídeo

  1. Antes de empezar, ve al vídeo de YouTube o Vimeo que quieras incrustar y copia el vínculo.

    Como alternativa, también puede copiar un vínculo directo a un archivo de vídeo válido. Consulte Configuración de vídeo básica para ver los vínculos válidos.

  2. En el administrador de Commerce, vuelva al área de trabajo de Page Builder donde desea agregar el vídeo.

  3. En el panel Page Builder, expanda Media y arrastre un marcador de posición Video al escenario.

    Arrastrando un marcador de posición de vídeo al escenario {width="600" modal="regular"}

  4. Pase el ratón sobre el contenedor de vídeo para ver la caja de herramientas y elija el icono Configuración ( icono Configuración {width="20"} ).

  5. Para Video URL, pegue la dirección URL del vídeo que ha copiado.

    La dirección URL del vídeo Page Builder utilizado en este ejemplo es: https://www.youtube.com/watch?v=Y0KNS7C5dZA.

  6. Para limitar el Maximum Width del vídeo, escriba el ancho máximo en píxeles.

    Si está en blanco, el vídeo tiene el ancho permitido por el contenedor, lo que permite márgenes y relleno.

  7. En la esquina superior derecha, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

Cambiar la configuración de vídeo

  1. Pase el ratón sobre el contenedor de vídeo para ver la caja de herramientas y elija el icono Configuración ( icono Configuración {width="20"} ).

  2. Modifique la configuración según las siguientes secciones:

  3. En la esquina superior derecha, haga clic en Save para aplicar la configuración y volver al área de trabajo Page Builder.

Configuración de vídeo básica

  1. Para cambiar el vídeo actual, actualice Video URL.

    Introduzca una URL de vídeo válida. Las direcciones URL de vídeo válidas pueden ser vínculos a:

    • Vídeos de YouTube: https://youtu.be/CoDhMRUUjeI
    • Vídeos de Vimeo: https://vimeo.com/190156113
    • Archivos de vídeo válidos (.mp4 se recomienda): https://myvideos.com/spiral.mp4

  2. Para cambiar la anchura permitida para el vídeo en la tienda, escriba el nuevo Maximum Width en píxeles.

    Si está en blanco, el vídeo amplía la anchura completa del contenedor, menos margen para los márgenes y el relleno.

  3. Para iniciar automáticamente el vídeo después de que se cargue la página, establezca Autoplay en Yes.

    Si Reproducción automática se establece en Yes, el vídeo se silencia durante la reproducción según la directiva. Sin embargo, incluso con esta configuración, los dispositivos móviles no pueden reproducir automáticamente los vídeos. Para obtener más información sobre estas directivas, consulte los siguientes recursos para desarrolladores:

    Si Reproducción automática se establece en No, el vídeo se reproduce únicamente bajo demanda del usuario.

Advanced

  1. Para controlar la posición horizontal del vídeo dentro del contenedor, elija un Alignment:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Opción Descripción
    Default Aplica la configuración predeterminada de alineación especificada en la hoja de estilos de la temática actual.
    Left Alinea el contenido a lo largo del borde izquierdo del contenedor de vídeo, con margen para cualquier relleno que se especifique.
    Center Alinea el contenido en el centro del contenedor de vídeo, con margen para cualquier relleno que se especifique.
    Right Alinea el contenido a lo largo del borde derecho del contenedor de vídeo, con margen para cualquier relleno que se especifique.

  • Establezca el estilo Border que se aplica a los cuatro lados del contenedor de vídeo:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Opción Descripción
    Default Aplica el estilo de borde predeterminado especificado por la hoja de estilos asociada.
    None No proporciona ninguna indicación visible de los bordes del contenedor.
    Dotted El borde del contenedor aparece como una línea de puntos.
    Dashed El borde del contenedor aparece como una línea discontinua.
    Solid El borde del contenedor aparece como una línea sólida.
    Double El borde del contenedor aparece como una línea doble.
    Groove El borde del contenedor aparece como una línea ranurada.
    Ridge El borde del contenedor aparece como una línea discontinua.
    Inset El borde del contenedor aparece como una línea de margen.
    Outset El borde del contenedor aparece como una línea de inicio.

  • Si establece un estilo de borde distinto de None, complete las opciones de visualización de borde:

    Color del borde {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Opción Descripción
    Border Color Especifique el color seleccionando una muestra, haciendo clic en el selector de color o introduciendo un nombre de color válido o un valor hexadecimal equivalente.
    Border Width Introduzca el número de píxeles de la anchura de la línea del borde.
    Border Radius Introduzca el número de píxeles para definir el tamaño del radio que se utiliza para redondear cada esquina del borde.

  • (Opcional) Especifique los nombres de CSS classes de la hoja de estilos actual para aplicarlos al contenedor de vídeo.

    Separe los distintos nombres de clase con un espacio.

  • Escriba valores, en píxeles, para que Margins and Padding especifique los márgenes exteriores y el margen interior del contenedor de vídeo.

    Introduzca cada valor correspondiente en el diagrama del contenedor de vídeo.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Área del contenedor Descripción
    Margins Cantidad de espacio en blanco que se aplica al borde exterior de todos los lados del contenedor.
    Padding Cantidad de espacio en blanco que se aplica al borde interior de todos los lados del contenedor.

Mover un vídeo

  1. Pase el ratón sobre el contenedor de vídeo para ver la caja de herramientas y elija el icono Mover ( Icono Mover {width="20"} ).

    Moviendo un vídeo {width="500" modal="regular"}

  2. Seleccione y arrastre el vídeo a la nueva posición, justo debajo de la guía roja.

    Utilizando la guía roja para colocar el vídeo {width="500" modal="regular"}

Eliminar un vídeo del escenario

  1. Pase el ratón sobre el contenedor de vídeo para ver la caja de herramientas y elija el icono Quitar ( Quitar icono ).

  2. Cuando se le pida que confirme, haga clic en OK.

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d