Template base

Background video documentation

Examples


Usage

<body>
    <div class="background-page overlay-container">
        <video autoplay="autoplay" loop muted poster="video-poster.jpg" class="background-fullscreen">
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="overlay-content">
        <header>
            ...
        </header>
        <div class="section-empty">
            <div class="container content">
                <div class="row">
                    ...
                </div>
            </div>
        </div>
    </div>
    <footer>
    ...
    </footer>
</body>
<body>
    <div class="background-page overlay-container">
        <video autoplay="autoplay" loop muted poster="video-poster.jpg" class="background-fullscreen">
            <div data-video-youtube="NA6fPQTd22M" video-quality="hd"></div>
        </video>
    </div>
    <div class="overlay-content">
        <header>
            ...
        </header>
        <div class="container content">
            <div class="row">
                ...
            </div>
        </div>
    </div>
    <footer>
    ...
    </footer>
</body>

Main settings

Name Type Description
Settings Information Add the background-page obejct in first row of body and add class overlay-content to the main content container.
Overlay pattern HTML To add a overlay insert it into <div class="background-page"> ... </div> object, in first row.
Example:

<div class="background-page overlay-container">
    <div class="bg-overlay transparent-dark"></div>
    <video autoplay="autoplay" loop muted poster="video-poster.jpg" class="background-fullscreen">
        <source src="video.mp4" type="video/mp4">
    </video>
</div>
Overlay pattern documentation

Overlay pattern is a feature of base components. Complete documentation here


Youtube background video documentation

Youtube background video feature is part of background video section. Complete documentation here