Video background title

Lorem ipsum is simply dummy

Variants

MP4 Youtube Parallax Full screen Full screen parallax

Usage

<div class="header-video white">
    <div class="videobox">
        <video autoplay loop muted poster="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 / MP4 VIDEO</h1>
                <p>Lorem Ipsum is simply dummy text of the printing.</p>
            </div>
        </div>
    </div>
</div>

Main settings

Name Type Description
MP4 video Mixed MP4 video is raccommended method to use, you must upload your MP4 video on your server and use it. Video must be compatible with HTML5. You can use the free software Any video converter to convert your videos to MP4 HTML5 format.
Remember to set poster image of the video poster="poster.jpg", it's showed while video is loading or if the video play not possible, usually on mobile devices.
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">
        ...
    </div>
    ...
</body>