A video background can be created in Oxygen using a Container element and a Video element.

The basic idea is:

• The Container acts as the section wrapper
• The Video sits inside the container
• The Video is positioned behind the content
• A second inner container sits on top and holds your text, buttons, or other elements

This gives you a clean hero section with a background video and content layered above it.

Structure

The recommended structure is:

• Outer container
• Video element
• Overlay/content container
• Inner content container

Step-by-step

1. Add the outer container

Add a Container element and give it a class such as:

video-background-section

This will act as the wrapper for the entire section.

Apply these styles to the class:

.video-background-section {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

This creates the section area and ensures that anything positioned outside of it is clipped.

If you want a taller or shorter section, you can adjust the aspect-ratio or use a min-height instead.

2. Add the video element

Inside the outer container, add a Video element.

Set the video to:

• autoplay
• loop
• muted
• playsinline

These settings are typically required for background videos to play correctly across browsers.

Add a class such as:

background-video

Apply the following CSS:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

This positions the video behind the content and makes sure it fills the section without distortion.

3. Add the overlay container

Add another Container inside the outer container, after the Video element.

This container will sit above the video and hold your content.

Add a class such as:

video-background-overlay

Apply the following CSS:

.video-background-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 4.8rem;
    background: linear-gradient(
        to top right,
        rgba(13, 17, 23, 1) 0%,
        rgba(13, 17, 23, 0.9) 25%,
        rgba(13, 17, 23, 0.5) 50%,
        rgba(13, 17, 23, 0) 75%
    );
}

This stretches the overlay across the full section and places your content on top of the video.

The gradient is optional, but it is often helpful for readability.

4. Add an inner content container

Inside the overlay container, add another Container for your text and buttons.

Add a class such as:

video-background-content

Apply styles such as:

.video-background-content {
    width: 100%;
    max-width: 57.6rem;
}

You can then place your heading, text, buttons, or other elements inside this container.

Why this structure works

This approach works well because:

• the outer container controls the section size
• the video fills the container in the background
• the overlay sits above the video
• the inner content container keeps text aligned and readable

It also uses native Oxygen elements, which makes it easier to manage and style consistently.

Notes

• Use object-fit: cover on the video so it fills the area cleanly
• Keep the video muted and playsinline for better browser compatibility
• Use an overlay or gradient if text needs better contrast
• If needed, you can add responsive adjustments for padding, aspect ratio, or content alignment at smaller breakpoints

Example Structure

You can see the example structure in the below screenshot. The site in the screenshot has two background videos – one for desktop and one for mobile.