<style>
.video-gallery-container {
position: relative;
left: 50%;
transform: translate(-50%, 0px);
width: 850px;
font-family: "", sans-serif;
background: ;
padding: 0x 0 0 0;
margin: 0 auto;
}
.video-gallery-container,
.video-gallery-container * {
box-sizing: border-box;
}
.video-gallery-container .video-gallery {
display: flex;
background: ;
justify-content: center;
padding: 10px;
padding-top: 10px;
gap: 10px;
color: #02151e;
}
.video-gallery .featured-video {
width: 100%;
}
.video-gallery h3.video-title {
line-height: 1.6;
font-size: 20px;
width: 100%;
}
.video-gallery h3.video-desc {
line-height: 1.6;
font-size: 15px;
width: 100%;
}
.video-gallery .thumbnail {
height: 108px;
width: 192px;
object-fit: cover;
cursor: pointer;
padding: 0px;
}
.video-gallery .video {
position: relative;
}
.video-gallery .video:hover .play-icon {
opacity: 1;
}
.video-gallery .play-icon {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0;
transition: opacity 400ms ease;
}
.video-gallery .video .play-icon img {
height: 92%;
width: 100%;
object-fit: cover;
}
.video-gallery .all-videos {
display: flex;
flex-direction: column;
gap: 0px;
}
.video-gallery .all-videos .video {
gap: 0px;
padding: 0px;
}
.video-gallery .responsive-iframe {
position: relative;
height: 0;
overflow: hidden;
padding-top: 56.25%;
padding-bottom: 30px;
}
.video-gallery .responsive-iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width: 800px) {
.video-gallery-container {
width: 100%;
}
}
@media (max-width: 700px) {
.video-gallery-container .video-gallery {
flex-direction: column;
}
.video-gallery .all-videos {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.video-gallery .thumbnail {
height: 100%;
width: 100%;
}
.video-gallery .play-icon{
height: 108%;
position: absolute;
transform: translate(-50%, -46.5%);
}
}
@media (max-width: 500px) {
.video-gallery .all-videos {
grid-template-columns: 1fr;
}
.video-gallery-container {
max-width: 400px;
}
.video-gallery-container h2.title {
font-size: 24px;
font-weight: bold;
}
}
</style>
<div class="video-gallery-container">
<div class="video-gallery">
<div class="featured-video">
<div class="responsive-iframe">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/CNvyZ_1DIUU?autoplay=1&playlist=CNvyZ_1DIUU&loop=1" title="YouTube video player" width="560"></iframe>
</div>
<h3 class="video-title">
Welcome to the SECTIONNAME section
</h3>
<h3 class="video-desc">
Please select any of the following videos to play them
</h3>
</div>
<div class="all-videos">
<div class="video">
<img class="thumbnail"
src="https://i.ytimg.com/vi/CODE/maxresdefault.jpg"
data-id="CODE"
data-title="TITLE"
data-desc="DESCRIPTION"
alt="" />
<div class="play-icon">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhYhzFoVL6zMdEjThpvdEbBxTWRcs6C4FMzNcNRV96apcMselm4vsLNhK27pMQCTTh-tJUnO-j8PqOtY9jeotOT6NmsTW0KNm4bGV0sWrri41CLFHqJjITI-b9q2v-lNe6Ymo_fRRGHc6a3sWOo3vRLyNmiikeV3PXOWd7-Il35xbrkfWSzOtxidzjsLQ"
alt="" />
</div>
</div>
<div class="video">
<img class="thumbnail"
src="https://i.ytimg.com/vi/CODE/maxresdefault.jpg"
data-id="CODE"
data-title="TITLE"
data-desc="DESCRIPTION"
alt="" />
<div class="play-icon">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhYhzFoVL6zMdEjThpvdEbBxTWRcs6C4FMzNcNRV96apcMselm4vsLNhK27pMQCTTh-tJUnO-j8PqOtY9jeotOT6NmsTW0KNm4bGV0sWrri41CLFHqJjITI-b9q2v-lNe6Ymo_fRRGHc6a3sWOo3vRLyNmiikeV3PXOWd7-Il35xbrkfWSzOtxidzjsLQ"
alt="" />
</div>
</div>
<div class="video">
<img class="thumbnail"
src="https://i.ytimg.com/vi/CODE/maxresdefault.jpg"
data-id="CODE"
data-title="TITLE"
data-desc="DESCRIPTION"
alt="" />
<div class="play-icon">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhYhzFoVL6zMdEjThpvdEbBxTWRcs6C4FMzNcNRV96apcMselm4vsLNhK27pMQCTTh-tJUnO-j8PqOtY9jeotOT6NmsTW0KNm4bGV0sWrri41CLFHqJjITI-b9q2v-lNe6Ymo_fRRGHc6a3sWOo3vRLyNmiikeV3PXOWd7-Il35xbrkfWSzOtxidzjsLQ"
alt="" />
</div>
</div>
<div class="video">
<img class="thumbnail"
src="https://i.ytimg.com/vi/CODE/maxresdefault.jpg"
data-id="CODE"
data-title="TITLE"
data-desc="DESCRIPTION"
alt="" />
<div class="play-icon">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhYhzFoVL6zMdEjThpvdEbBxTWRcs6C4FMzNcNRV96apcMselm4vsLNhK27pMQCTTh-tJUnO-j8PqOtY9jeotOT6NmsTW0KNm4bGV0sWrri41CLFHqJjITI-b9q2v-lNe6Ymo_fRRGHc6a3sWOo3vRLyNmiikeV3PXOWd7-Il35xbrkfWSzOtxidzjsLQ"
alt="" />
</div>
</div>
<div class="video">
<img class="thumbnail"
src="https://i.ytimg.com/vi/CODE/maxresdefault.jpg"
data-id="CODE"
data-title="TITLE"
data-desc="DESCRIPTION"
alt="" />
<div class="play-icon">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhYhzFoVL6zMdEjThpvdEbBxTWRcs6C4FMzNcNRV96apcMselm4vsLNhK27pMQCTTh-tJUnO-j8PqOtY9jeotOT6NmsTW0KNm4bGV0sWrri41CLFHqJjITI-b9q2v-lNe6Ymo_fRRGHc6a3sWOo3vRLyNmiikeV3PXOWd7-Il35xbrkfWSzOtxidzjsLQ"
alt="" />
</div>
</div>
<div class="video">
<img class="thumbnail"
src="https://i.ytimg.com/vi/CODE/maxresdefault.jpg"
data-id="CODE"
data-title="TITLE"
data-desc="DESCRIPTION"
alt="" />
<div class="play-icon">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhYhzFoVL6zMdEjThpvdEbBxTWRcs6C4FMzNcNRV96apcMselm4vsLNhK27pMQCTTh-tJUnO-j8PqOtY9jeotOT6NmsTW0KNm4bGV0sWrri41CLFHqJjITI-b9q2v-lNe6Ymo_fRRGHc6a3sWOo3vRLyNmiikeV3PXOWd7-Il35xbrkfWSzOtxidzjsLQ"
alt="" />
</div>
</div>
<div class="video">
<img class="thumbnail"
src="https://i.ytimg.com/vi/CODE/maxresdefault.jpg"
data-id="CODE"
data-title="TITLE"
data-desc="DESCRIPTION"
alt="" />
<div class="play-icon">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEhYhzFoVL6zMdEjThpvdEbBxTWRcs6C4FMzNcNRV96apcMselm4vsLNhK27pMQCTTh-tJUnO-j8PqOtY9jeotOT6NmsTW0KNm4bGV0sWrri41CLFHqJjITI-b9q2v-lNe6Ymo_fRRGHc6a3sWOo3vRLyNmiikeV3PXOWd7-Il35xbrkfWSzOtxidzjsLQ"
alt="" />
</div>
</div>
</div>
</div>
</div>
<script>
const videoThumbnails = document.querySelectorAll(
".video-gallery .all-videos .thumbnail"
);
const videoPlayer = document.querySelector(
".video-gallery .featured-video iframe"
);
const videoTitle = document.querySelector(".video-gallery .video-title");
const videoDesc = document.querySelector(".video-gallery .video-desc");
const showVideo = (videoId, title, desc) => {
let videoUrl = `https://www.youtube.com/embed/${videoId}?rel=0`;
videoPlayer.setAttribute("src", videoUrl);
videoTitle.innerHTML = title;
videoDesc.innerHTML = desc;
};
videoThumbnails.forEach((v) => {
v.addEventListener("click", () => {
showVideo(v.dataset.id, v.dataset.title, v.dataset.desc);
});
});
</script>
No comments:
Post a Comment