TITLE COMPONENT / FULLSCREEN VIDEO

Lorem Ipsum is simply dummy text of the printing.

Usage

<div class="header-video full-screen-title white">
    <div class="videobox">
        <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 VIDEO</h1>
                <p>Lorem Ipsum is simply dummy text of the printing.</p>
            </div>
        </div>
    </div>
</div>
<div class="header-video full-screen-title white">
    <div class="videobox layer-parallax">
        <div data-video-youtube="zGtz_GOA79w"></div>
    </div>
    <div class="overlaybox">
        <div class="container">
            <h1>TITLE VIDEO FULLSCREEN COMPONENT</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
Code location Information Insert the title code just belove header code. Example:
<body>
    <header> 
        ... 
    </header>
    <div class="header-video full-screen-title">
        ...
    </div>
    ...
</body>
Full screen height HTML attribute If height of title is larger than expected, you can adjust it with attribute data-sub-height="123". Replace 123 with height value you want remove in px. This value often is the height of the header. Example
<div class="header-title full-screen-title" data-sub-height="90">
    ...
</div>

Title video documentation

Title video fullscreen is part of title video. Complete documentation here

MP4 and Youtube background video documentation

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