Section

Background video section

BACKGROUND VIDEO SECTION

L'orem ipsum dolor, consectetur adipisicing elit

BACKGROUND VIDEO SECTION
WITH OVERLAY

L'orem ipsum dolor, consectetur adipisicing elit

Usage

<div class="section-bg-video box-middle-container" style="height:400px;">
    <div class="videobox">
        <video autoplay loop muted poster="video-poster.jpg">
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="container content overlay-content box-middle white text-center">
        <h1>BACKGROUND VIDEO SECTION</h1>
        <p>L'orem ipsum dolor, consectetur adipisicing elit</p>
    </div>
</div>
<div class="section-bg-video box-middle-container" style="height:400px;">
    <div class="videobox" style="background-image:url('video-poster.jpg')">
        <div data-video-youtube="BX4yotn2FPI"></div>
    </div>
    <div class="container content overlay-content box-middle white text-center">
        <h1>BACKGROUND VIDEO SECTION</h1>
        <p>L'orem ipsum dolor, consectetur adipisicing elit</p>
    </div>
</div>

Main settings

Name Type Description
HTML initialization Mixed Simple use the codes above.
Youtube link String You can insert a Youtube background video in two ways:
1 ) With code <div data-video-youtube="id-video-youtube"></div>
2 ) With code: https://www.youtube.com/embed/BX4yotn2FPI?playlist=BX4yotn2FPI&loop=1&start=0 &autoplay=1&controls=0 &showinfo=0&wmode=transparent& iv_load_policy=3 &modestbranding=1&rel=0&enablejsapi=1
And replace ID BX4yotn2FPI with ID of your Youtube video. Replace two times, also on playlist=BX4yotn2FPI.
Mobile devices Information Youtube autoplay not work on mobile devices and it is replaced with a static image, the image is code style="background-image:url('video-poster.jpg').
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="image.jpg", it's showed while video is loading, or if video play not possible.
Centered content CSS class Add class box-middle-container to section object and class overlay-content to content object.
Centered content is a feature of base components. Complete documentation here
Overlay pattern Mixed 1 ) Add class overlay-container to target object and class overlay-content to content object.
2 ) Add object <div class="bg-overlay dotted"></div> into first row of target object.
Overlay pattern is a feature of base components. Complete documentation here