File: /var/www/html/acharya-rajnikant-backup/gallery.php
<?php include 'header.php' ?>
<!-- ================> gallery section start here <================== -->
<div class="gallery padding--top padding--bottom bg-light">
<div class="container-fluid">
<div class="section__header text-center">
<h2>Gallery 4 Columns</h2>
<p>Enthusiastically underwhelm quality benefits rather than professional outside the box thinking.
Distinctively network highly efficient leadership skills</p>
</div>
<div class="section__wrapper">
<div class="row">
<!-- VIDEO 1 -->
<div class="col-lg-3 col-sm-6 col-12 mb-4">
<div class="youtube-wrapper" data-video-id="w-CAagwidbw" data-bs-toggle="modal"
data-bs-target="#videoModal">
<div class="youtube-cover"
style="background-image:url('https://img.youtube.com/vi/w-CAagwidbw/hqdefault.jpg');">
<div class="play-button"></div>
</div>
</div>
</div>
<!-- VIDEO 2 -->
<div class="col-lg-3 col-sm-6 col-12 mb-4">
<div class="youtube-wrapper" data-video-id="2KNjIvPl27c" data-bs-toggle="modal"
data-bs-target="#videoModal">
<div class="youtube-cover"
style="background-image:url('https://img.youtube.com/vi/2KNjIvPl27c/hqdefault.jpg');">
<div class="play-button"></div>
</div>
</div>
</div>
<!-- VIDEO 3 -->
<div class="col-lg-3 col-sm-6 col-12 mb-4">
<div class="youtube-wrapper" data-video-id="Fl7g3EHH9o8" data-bs-toggle="modal"
data-bs-target="#videoModal">
<div class="youtube-cover"
style="background-image:url('https://img.youtube.com/vi/Fl7g3EHH9o8/hqdefault.jpg');">
<div class="play-button"></div>
</div>
</div>
</div>
<!-- VIDEO 4 -->
<div class="col-lg-3 col-sm-6 col-12 mb-4">
<div class="youtube-wrapper" data-video-id="zrcr4bc0A0A" data-bs-toggle="modal"
data-bs-target="#videoModal">
<div class="youtube-cover"
style="background-image:url('https://img.youtube.com/vi/zrcr4bc0A0A/hqdefault.jpg');">
<div class="play-button"></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-12 cate-1 mb-4">
<div class="gallery__item">
<div class="gallery__inner">
<div class="youtube-wrapper" data-video-id="hMGf3pWg_sk" data-bs-toggle="modal"
data-bs-target="#videoModal">
<div class="youtube-cover"
style="background-image:url('https://img.youtube.com/vi/hMGf3pWg_sk/hqdefault.jpg');">
<div class="play-button"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-12 cate-1 mb-4">
<div class="gallery__item">
<div class="gallery__inner">
<div class="youtube-wrapper" data-video-id="EMmmWgPbkUw" data-bs-toggle="modal"
data-bs-target="#videoModal">
<div class="youtube-cover"
style="background-image:url('https://img.youtube.com/vi/EMmmWgPbkUw/hqdefault.jpg');">
<div class="play-button"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-12 cate-1 mb-4">
<div class="gallery__item">
<div class="gallery__inner">
<div class="youtube-wrapper" data-video-id="Zw82SlR7F_0" data-bs-toggle="modal"
data-bs-target="#videoModal">
<div class="youtube-cover"
style="background-image:url('https://img.youtube.com/vi/Zw82SlR7F_0/hqdefault.jpg');">
<div class="play-button"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-12 cate-1 mb-4">
<div class="gallery__item">
<div class="gallery__inner">
<div class="youtube-wrapper" data-video-id="cOBoR_xaFzo" data-bs-toggle="modal"
data-bs-target="#videoModal">
<div class="youtube-cover"
style="background-image:url('https://img.youtube.com/vi/cOBoR_xaFzo/hqdefault.jpg');">
<div class="play-button"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-12 cate-1 mb-4">
<div class="gallery__item">
<div class="gallery__inner">
<div class="youtube-wrapper" data-video-id="PaWD7-bQXdA" data-bs-toggle="modal"
data-bs-target="#videoModal">
<div class="youtube-cover"
style="background-image:url('https://img.youtube.com/vi/PaWD7-bQXdA/hqdefault.jpg');">
<div class="play-button"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 col-12 cate-1 mb-4">
<div class="gallery__item">
<div class="gallery__inner">
<div class="youtube-wrapper" data-video-id="RobS-yT4uNw" data-bs-toggle="modal"
data-bs-target="#videoModal">
<div class="youtube-cover"
style="background-image:url('https://img.youtube.com/vi/RobS-yT4uNw/hqdefault.jpg');">
<div class="play-button"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="videoModal" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content bg-dark">
<button type="button" class="btn-close btn-close-white ms-auto m-2"
data-bs-dismiss="modal"></button>
<div class="ratio ratio-16x9">
<iframe id="modalVideoIframe" src="" frameborder="0" allow="autoplay; encrypted-media"
allowfullscreen>
</iframe>
</div>
</div>
</div>
</div>
<style>
.youtube-wrapper {
position: relative;
width: 100%;
height: 280px;
border-radius: 10px;
overflow: hidden;
cursor: pointer;
}
.youtube-cover {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}
.youtube-cover::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
}
.play-button {
width: 64px;
height: 64px;
background: rgba(255, 0, 0, 0.9);
border-radius: 50%;
position: relative;
z-index: 2;
}
.play-button::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-40%, -50%);
border-style: solid;
border-width: 10px 0 10px 18px;
border-color: transparent transparent transparent white;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const modal = document.getElementById("videoModal");
const iframe = document.getElementById("modalVideoIframe");
document.querySelectorAll(".youtube-wrapper").forEach(video => {
video.addEventListener("click", function() {
const videoId = this.getAttribute("data-video-id");
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1`;
});
});
modal.addEventListener("hidden.bs.modal", function() {
iframe.src = ""; // stop video on close
});
});
</script>
</div>
</div>
</div>
<!-- ================> gallery section end here <================== -->
<?php include 'footer.php'; ?>