Video background title

Lorem ipsum is simply dummy

Variants

MP4 Youtube Parallax Full screen Full screen parallax

Usage

<div class="header-video header-parallax full-screen-title white">
    <div class="videobox layer-parallax">
        <video autoplay loop muted poster="video-poster.jpg">
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="overlaybox">
        <div class="container">
            <div class="title-base">
                <hr class="anima" />
                <h1>TITLE COMPONENT / FULLSCREEN PARALLAX VIDEO</h1>
                <p>Lorem Ipsum is simply dummy text of the printing.</p>
            </div>
        </div>
    </div>
</div>

<div class="header-video header-parallax white full-screen-title">
    <div class="videobox layer-parallax">
        <div data-video-youtube="zGtz_GOA79w"></div>
    </div>
    <div class="overlaybox">
        <div class="container">
            <h1>Lorem  ipsum dole milos</h1>
            <h2>Dolor sit amet, consectetur adipisicing elit</h2>
            <ol class="breadcrumb b">
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active">Data</li>
            </ol>
        </div>
    </div>
</div>

Main settings

Name Type Description
Settings HTML 1 ) Add classes header-parallax full-screen-title to title object.
2 ) Add class layer-parallax to videobox boject
White CSS Add class white to the container object to convert all colors to white. Use this feature for dark backgrounds.
Overlay pattern Mixed Add the code <div class="bg-overlay dotted"></div> into the title, as first row.
Overlay pattern is a feature of Javascript and CSS, complete documentation and patterns list here
Code location Information Insert the title code just belove header code. Example: 
<body>
    <header> 
        ... 
    </header>
    <div class="header-video header-parallax full-screen-title">
        ...
    </div>
    <div class="section-empty">
        <div class="container content">
            ...
        </div>
    </div>
    <footer>
           ...
    </footer>
</body>