Video background with content overlay – Featured Tutorial - Quantum Designers

Video background with content overlay – Featured Tutorial

    1. HTML document definition

    All webpages are defined with a HTML document. The first step defines this document.

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <title>Video | Image | Content</title>

    <link rel=”stylesheet” type=”text/css” href=”styles.css” />
    </head>

    <body>
    <!– STEP 2 HERE –>

    </body>

    </html>

    2. Foreground Content

    For SEO purposes , the main page content is placed first within the page body. The text and image content for the page are defined as any other. The ‘main’ tag is used to contain the content so that CSS can easily control how the content is positioned in relation to the background video.

    <main>
    <h1>Hello!</h1>
    <p>Welcome to Quantum Designers, we are a Web Design, Development and Hosting provider</p>
    <p align=”center”><img src=”image.jpg” /></p>
    </main>

    3. Background video

    The page background is made from a video element that is set to automatically play in a repeating loop without sound. This is set through the use of the ‘autoplay’, ‘mute’ and ‘loop’ attributes of the video container. The browser will choose to play the first video source listed that it supports.

    <video autoplay muted loop>

    <source src=”http://www.quantumdesigners.com/sample-videos/video.mov” type=”video/mov” />
    <source src=”http://www.quantumdesigners.com/sample-videos/video.mp4″ type=”video/mp4″ />
    <source src=”http://www.quantumdesigners.com/sample-videos/video.ogg” type=”video/ogg” />
    <source src=”http://www.quantumdesigners.com/sample-videos/video.3gp” type=”video/3gp” />
    </video>

    4. Document and body style

    Create a new file called styles.css for the presentation rules. This step sets the HTML document container and the content body to cover the full visible area of the browser window, along with setting the default colours and font. A transparent background is needed for step 5.

    html,body{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Helvetica, sans-serif;
    background: transparent;
    color: #fff;
    }

    5. Video positioning and size

    The video should always display under the page content. This is achieved via fixed positioning with a z-index of -1 to place the video under the document body. The video covers the full document window using ‘transform’,’width’ and ‘height’ to size the video from the centre of the page window.

    video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    z-index: -9999;
    transform: translateX(-50%) translateY(-50%);
    background: #000;
    }

    6. Content container

    The content container is displayed in a way that avoids the video making its content unreadable. A semi-transparent background color is applied to the ‘main’ container. This container is also set to cover the full height of the window and to centrally position itself using ‘auto’ calculated horizontal margins.

    main {
    background: rgba(0,0,0,0.5);
    padding: 2em;
    width: 75%;
    min-height: 100%;
    margin: 0 auto 0 auto;
    }

    7.Rounded picture

    A maximum border radius is applied to cut out rounded edges from the image.

    .round{
    border-radius: 100%;
    }

     

    CLICK HERE to see the live example of this tutorial.

Facebook
Twitter
LinkedIn
Light
Scroll to Top