Home/Explore/

Overlay play button

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<div style="
    /* Used to position the overlay */
    position: relative;
">
    <!-- The video element -->
    <video src="..." />

    <!-- The overlay area -->
    <div style="
        /* Position */
        left: 0;
        position: absolute;
        top: 0;

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

        /* Center the content */
        align-items: center;
        display: flex;
        justify-content: center;

        /* Add a dark background */
        background-color: 'rgba(0, 0, 0, 0.25)',
    ">
        <!-- The player button -->
        ...
    </div>
</div>

Related patterns

Video background

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