BLACK FRIDAY SPECIAL!
Apply Coupon:BLFCM2022to Get 40% Flat Discount!🔥
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