Home/Explore/

Video background

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
In this pattern, the video is displayed in the background.
<div style="
    /* Used to position the video and content */
    position: relative;
">
    <!-- The video container -->
    <div style="
        /* Positioned at the top left corner */
        left: 0px;
        position: absolute;
        top: 0px;

        /* Take full size */
        height: 100%;
        width: 100%;

        /* Hide the scrollbar */
        overflow: hidden;
    ">
        <video
            style="
                object-fit: cover;

                /* Center the video */
                left: 50%;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);

                /* Take full width */
                width: 100%;
            "
            src="..."
        >
    </div>

    <!-- The content -->
    <div style="
        /* Positioned at the top left corner */
        left: 0px;
        position: absolute;
        top: 0px;

        /* Take full size */
        height: 100%;
        width: 100%;

        /* Center the content */
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    ">
        ...
    </div>
</div>

Related patterns

Full background

Overlay play button

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!