Skip to main content

Background Video

Create responsive background video embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

Example

With this element you can make video background with title and description in cover pages. Responsive in any device, just copy youtube url and paste in here, very simple.


Youtube Video Background

Use this amazing feature on the background of any row!
It's simple, just copy your youtube video url and paste in here


Copy and paste following code

            
              <!-- video start -->
              <div class="background-video">
                <div class="overlay"></div>
                <!-- video url in here -->
                <div class="video-youtube-area">
                  <iframe width="1500" height="1080" src="//www.youtube.com/embed/cC9r0jHF-Fw?start=2:32&autoplay=1&loop=1&mute=1&showinfo=0&controls=0&start=2&&" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <!-- end video url -->
                <div class="container h-100">
                  <div class="d-flex h-100 text-center align-items-center">
                    <div class="w-100 text-white">
                      <!-- video title -->
                      <h1 class="h1 display-3-sm display-2-md display-1-lg text-white">Youtube Video Background</h1>
                      <div class="text-center">
                        <div class="mini-line"></div>
                      </div>
                      <!-- video description -->
                      <p class="lead text-white d-none d-sm-block">Use this amazing feature on the background of any row!<br>It's simple, just copy your youtube video url and paste in here</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- end video -->
            
          

Just replece following

  • //www.youtube.com/embed/cC9r0jHF-Fw?start=2:32
  • Youtube Video Background
  • Use this amazing feature on the background of any row.....

This also can applied in html video or vimeo video, just editing small code.