How to add a VIDEO to the page BACKGROUND

To add a background video to a block on your page, follow the steps below:

1. Open the page editor;

2. Click the gear icon in the top right corner of the screen;

3. Then click "Javascript & CSS";

4. Click "Adicionar" to add a new code;

5. Choose a name for your code, select the "Funcionamento" option and add the entire code below into the text field;

<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. You will need to make two changes to the code:

• Change the part of the code where it says b1033405 to the ID of the block where you want the video to play.

If you have questions about how to identify a block's ID, click here to read our article.

• Change where it says "https://seuservidor.com.br/seuvideo.mp4" to your video's link;

Still have questions? Reach out to our team on Chat! We're always happy to help!

Updated on: 08/10/2026