Background video section

Sections documentation

  1. Home
  2. Sections
  3. Video

Background video section

Lorem ipsum dolor, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Background video section

Lorem ipsum dolor, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

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 pattern-name"></div> as first item and replace pattern-name with the pattern you want. Overlay pattern is a feature of Javascript and CSS, complete documentation and patterns list here.