How can we make a video background for the whole page

[moatboy]

I can't find any resources on this, I am using the blank template. Afaik, width of 100% and height of 100% + object_fit cover should do it. But it doesn't cover the whole screen still. Thanks!

    return rx.container(
       
       rx.video(
        url="/bg.mp4",
        style={
            "position": "fixed",  # Fix the video to the background
            "top": "0",
            "left": "0",
            "width": "100%",
            "height": "100%",
            "object_fit": "cover",  # Ensure the video covers the whole screen
            "z_index": "-1",  # Send the video to the background
            }
        ),

        back_button(),
        rx.color_mode.button(position="top-right"),
        rx.vstack(
            rx.heading("References", size="8", color_scheme="green", weight="light"),
            rx.table.root(
                rx.table.header(
                    rx.table.row(
                        rx.table.column_header_cell("Title"),
                        rx.table.column_header_cell("Description")
                    )
                ),
                rx.table.body(*rows),
                width="100%",
            ),
            spacing="5",
            justify="center",
            min_height="85vh",
        ),
    )

[linear]

ENG-4424 How can we make a video background for the whole page

[clarin-ebtio800090]

Hello, we tried to solve the issue.

This is what we did:

Modified the Video component in reflex/components/el/elements/media.py to add support for fullscreen background video. Added new props and updated the create method to handle the fullscreen background styling.

You can review changes in this commit: clarin-ebtio800090@6d37704.

Caution

Disclaimer: The concept of solution was created by AI and you should never copy paste this code before you check the correctness of generated code. Solution might not be complete, you should use this code as an inspiration only.

---

Latta AI seeks to solve problems in open source projects as part of its mission to support developers around the world. Learn more about our mission at https://latta.ai/ourmission . If you no longer want Latta AI to attempt solving issues on your repository, you can block this account.

[moatboy]

^ This solution doesn't work. The thing is when I remove everything else and just have a rx.video on the page, it is great. But if I add text, heading, etc. it just makes the video smaller on the page instead of going behind it.