Medios: vídeo

Utilice el Vídeo tipo de contenido para añadir un vídeo alojado en YouTube o Vimeo a la Page Builder stage. Es fácil incrustar vídeo en una página o bloque, o en las descripciones de productos y categorías.

w-700 modal-image
Vídeo en la página principal de la tienda
NOTE
Si está realizando cambios importantes en Page Builder contenido, se recomienda aumentar el Duración de 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

w-600 modal-image
Cuadro de herramientas de vídeo
Herramienta
Icono
Descripción
Mover
img-md
w-25
Icono Mover
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
img-md
w-25
Icono de configuración
Abre el Edit Video, donde puede cambiar las propiedades del vídeo y del contenedor.
Hide
img-md
w-25
Icono Ocultar
Oculta el vídeo actual.
Mostrar
img-md
w-25
Mostrar icono
Muestra el vídeo oculto.
Duplicar
img-md
w-25
Icono Duplicar
Realiza una copia del vídeo.
Eliminar
img-md
w-25
Icono Eliminar
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, vaya a YouTube o Vimeo que desee incrustar y copie 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 vínculos válidos.

  2. En el Commerce Administrador, vuelva a la Page Builder espacio de trabajo en el que desea agregar el vídeo.

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

    img-md
    w-600 modal-image
    Arrastrar un marcador de posición de vídeo al escenario
  4. Pase el ratón sobre el contenedor de vídeo para mostrar el cuadro de herramientas y elegir Configuración (+-----------------------------------+ | img-md | +===================================+ | w-20 | +-----------------------------------+ | Icono de configuración | +-----------------------------------+) icono.

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

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

  6. Para limitar el Maximum Width del vídeo, introduzca la anchura máxima 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 de y volver a Page Builder workspace.

Cambiar la configuración de vídeo

  1. Pase el ratón sobre el contenedor de vídeo para mostrar el cuadro de herramientas y elegir Configuración (+-----------------------------------+ | img-md | +===================================+ | w-20 | +-----------------------------------+ | Icono de configuración | +-----------------------------------+) icono.

  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 de y volver a Page Builder workspace.

Configuración de vídeo básica

  1. Para cambiar el vídeo actual, actualice el 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 hasta Yes.

    Si la reproducción automática está configurada 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 la reproducción automática está configurada 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 una 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.
  • Configure las variables Border estilo 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 bordes:

    img-md
    w-600 modal-image
    Color del borde
    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 estilo actual para aplicarla al contenedor de vídeo.

    Separe los distintos nombres de clase con un espacio.

  • Introduzca valores, en píxeles, para Margins and Padding para especificar los márgenes externos y el relleno interno 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 mostrar el cuadro de herramientas y elegir Mover (+------------------------+ | img-md | +========================+ | w-20 | +------------------------+ | Icono Mover | +------------------------+) icono.

    img-md
    w-500 modal-image
    Mover un vídeo
  2. Seleccione y arrastre el vídeo a la nueva posición, justo debajo de la guía roja.

    img-md
    w-500 modal-image
    Uso de la guía roja para colocar el vídeo

Eliminar un vídeo del escenario

  1. Pase el ratón sobre el contenedor de vídeo para mostrar el cuadro de herramientas y elegir Eliminar ( Icono Eliminar ) icono.

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

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