Header title

Lorem ipsum is simply dummy text of the printing

  1. Home
  2. Headers
  3. Video

Previews

Parallax
Full screen
Full screen parallax

Usage

<header class="header-video">
    <video autoplay loop muted playsinline poster="image.jpg">
        <source src="video.mp4" type="video/mp4">
    </video>
    <div class="container">
        <h1>Header title</h1>
        <h2>Lorem ipsum is simply dummy text of the printing</h2>
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Headers</a></li>
            <li><a href="#">Video</a></li>
        </ol>
    </div>
</header>

    <header class="header-video video-parallax full-screen">
    <video autoplay loop playsinline muted poster="image.jpg">
        <source src="video.mp4" type="video/mp4">
    </video>
    <div class="container">
        <h1>Header title</h1>
        <h2>Lorem ipsum is simply dummy text of the printing</h2>
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Headers</a></li>
            <li><a href="#">Video</a></li>
        </ol>
    </div>
</header>

Main settings

Name Type Description
Video file Information You need to upload your MP4 video on your server and use it. The video must be compatible with the HTML5 format. You can use the free software Any video converter to convert your videos. Remember to set the poster image of the video with the attribute poster="image.jpg", it's showed while the video is loading or if the video play is not possible, usually on mobile devices.
Full screen CSS Add the class full-screen to the component to make it fullscreen. You can use the attribute data-offset="123" to adjust the header height.
Parallax CSS Add the class video-parallax to the component to make it parallax.
Light color CSS Add the class light to the component to convert all colors to white. Use this feature for dark backgrounds.
Alignment CSS Add the class align-center or align-right to the component to align in the center or align right the contents.
Try it Align center Align right
Code location Information For information about the code location of this component visit the start here page.
Header image
Header base
Header slider