Background
These modular elements can be readily used and customized in every layout across pages.
See the documentationImage Background
Image Background
<div class="position-relative py-6 py-lg-8">
<div class="bg-holder rounded-soft overlay overlay-0" style="background-image:url(../assets/img/gallery/2.jpg);"></div> <!--/.bg-holder-->
<div class="position-relative text-center">
<h4 class="text-white">Image Background</h4>
</div>
</div>
Video Background
Video Background
<div class="position-relative">
<div class="bg-holder rounded-soft" style="background-image:url(../assets/video/beach.jpg);"><video class="bg-video" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline">
<source src="../assets/video/beach.mp4" type="video/mp4" />
<source src="../assets/video/beach.webm" type="video/webm" /></video></div> <!--/.bg-holder-->
<div class="position-relative vh-75 d-flex flex-center">
<h4 class="text-white">Video Background</h4>
</div>
</div>
Youtube Video Backgrounds
<div class="position-relative py-6 py-lg-8">
<div class="bg-holder rounded" style="background-image:url(../assets/img/generic/5.jpg);">
<div class="bg-youtube" data-property='{"videoURL":"https://www.youtube.com/watch?v=jfqQITaj9PQ","mute":true,"showYTLogo":false}'></div>
</div> <!--/.bg-holder-->
<div class="position-relative text-center">
<h4 class="text-white">Youtube Video Backgrounds</h4>
</div>
</div>
Stylesheet
<link href="assets/lib/jquery.mb.ytplayer/jquery.mb.YTPlayer.min.css" rel="stylesheet">
Javascript
<script src="assets/lib/jquery.mb.ytplayer/jquery.mb.YTPlayer.min.js"></script>
Start building beautiful apps
Navigate
Contact
369 ape view Avenue
Brooklyn, NY
369 ape view Avenue
Mon - Fri 9am - 5pm
+91 3929 3355
Brooklyn, NY
Subscribe
Latest Shape news, articles, and resources sent straight to your inbox every month.
Made With by ThemeWagon