Cómo insertar un VIDEO en el BACKGROUND de la página

Para insertar un video de background (fondo) de un bloque en tu página, sigue los pasos a continuación:

1. Accede al editor de páginas mediante el botón "Editar diseño";

2. Haz clic en el ícono de engranaje que está en la esquina superior derecha de la pantalla;

3. Luego, haz clic en "Javascript y CSS";

4. Haz clic en "Añadir código" para agregar un nuevo código;

5. Elige un nombre para tu código, selecciona la opción "Funcionamiento" y agrega en el campo de texto todo el código de abajo;

<script>

  $('#b_1033405').append(

    '<video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%" volume="0" canplay="false"><source src="https://seuservidor.com.br/seuvideo.mp4" type="video/mp4"></video><div class="overlay"></div>'

  );

</script>


<style>

  video {

    filter: grayscale(100%);

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: 0;

  }


  .overlay {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background-size: 3px 3px;

    z-index: 0;

  }

</style>

6. Deberás hacer dos cambios en el código:

• Cambiar la parte del código donde dice #b_1033405 por el ID del bloque donde quieres que el video se reproduzca.

Si tienes dudas sobre cómo identificar el ID de un bloque, haz clic aquí y accede a nuestro artículo

• Cambiar donde dice https://seuservidor.com.br/seuvideo.mp4 por el enlace de tu video;

¿Te quedó alguna duda? ¡Habla con nuestro equipo en el Chat! ¡Siempre estamos listos para ayudarte!

Actualizado el: 14/08/2026