Bootstrap Videos - Component Snippets
Video is a representation of what your product is and what you want customers to feel. It brings customers on the journey of discovering the brand, company, and product. Videos are a great way to represent your company's culture or background in a way that is both engaging and informative. Videos are also great for telling your company's story, introducing new products, or explaining how-to tutorials.
Video Style 1
<!--====== Glightbox Css ======-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<!--====== VIDEO ONE PART START ======-->
<section class="video-area video-one">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-10">
<div class="video-title text-center">
<h5>Learn & Share</h5>
<h2>Do good work and share</h2>
<p class="text-lg">
Firsthand accounts from leaders who have changed the world we
live in and the entrepreneurs shaping tomorrow’s world.
</p>
</div>
<!-- video title -->
</div>
</div>
<!-- row -->
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="video-content text-center">
<img src="https://cdn.ayroui.com/1.0/images/video/video.png" alt="Video" />
<a class="video-popup glightbox" href="https://www.youtube.com/watch?v=NJbXptdalP0">
<i class="lni lni-play"></i>
</a>
</div>
</div>
</div>
<!-- row -->
</div>
<!-- container -->
</section>
<!--====== VIDEO ONE PART ENDS ======-->
<!--====== Glightbox js ======-->
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
<script>
//========= glightbox
const videoTwo = GLightbox({
selector: ".glightbox",
type: "video",
source: "youtube", //vimeo, youtube or local
width: 900,
autoplayVideos: true,
});
</script>/*===== VIDEO ONE =====*/
.video-one {
background-color: var(--light-2);
padding-top: 120px;
padding-bottom: 100px;
}
.video-one .video-title h5 {
font-weight: 600;
color: var(--primary);
}
.video-one .video-title h2 {
font-weight: 700;
color: var(--black);
margin-top: 10px;
}
.video-one .video-title .text-lg {
margin-top: 24px;
color: var(--dark-3);
}
.video-one .video-content {
position: relative;
margin-top: 60px;
border-radius: 8px;
overflow: hidden;
}
.video-one .video-content img {
border-radius: 8px;
}
.video-one .video-content a {
width: 88px;
height: 88px;
line-height: 88px;
text-align: center;
border-radius: 50%;
background-color: var(--primary);
color: var(--white);
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
padding-left: 3px;
}
@media (max-width: 767px) {
.video-one .video-content a {
width: 68px;
height: 68px;
line-height: 68px;
font-size: 46px;
}
}
.video-one .video-content a:hover {
background-color: var(--white);
color: var(--primary);
}Video Style 2
Video Style 3
