How can I make a building block transparent (custom code block)?

Custom Coding
1

Hello there,

I am trying to insert a video on my landing page to be auto played in the background, but it also needs to be scrolled over, i.e. to disappear when the page is scrolled. I want it basically be my first block so I inserted some HTML code in a custom code block. Surprisingly it works, but the video is covered by the custom codes block´s background color now.

Now I´m trying to find a way to make the blocks background color transparent.
Any suggestions?

Would be very much appreciated!

The HTML code I am using:

Hintergrundvideo body, html { margin: 0; padding: 0; height: 100%; overflow-x: hidden; /* Verhindert horizontales Scrollen */ } 
    .video-container {
        position: relative;
        height: 100vh; /* Höhe des Viewports */
        overflow: hidden; /* Verhindert, dass das Video außerhalb des Containers angezeigt wird */
    }

    #bgVideo {
        position: absolute; /* Absolute Positionierung für das Video */
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -1;
        transform: translate(-50%, -50%);
    }

    .content {
        position: relative;
        z-index: 1;
        color: white;
        text-align: center;
        padding: 20px;
        background: rgba(0, 0, 0, 0.5); /* Halbdurchsichtiger Hintergrund für bessere Lesbarkeit */
    }

    .scrollable-content {
        padding: 20px;
        height: 200vh; /* Beispielhöhe für Scrollen */
    }
</style>

Willkommen auf meiner Website

Hier ist etwas Inhalt.

Mehr Inhalt

my content.

my content.