Skip to content

Instantly share code, notes, and snippets.

@kishoreandra

kishoreandra/video-grid.html

Last active November 15, 2021 10:32
Show Gist options
  • Save kishoreandra/05b654f72961e4eddd412052d20d7346 to your computer and use it in GitHub Desktop.
Save kishoreandra/05b654f72961e4eddd412052d20d7346 to your computer and use it in GitHub Desktop.
Download ZIP
video grid sample
Raw
video-grid.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video YT</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-transform: capitalize;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
body {
background: #eee;
}
.heading {
color: coral;
font-size: 40px;
text-align: center;
padding: 10px;
}
.container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 15px;
align-items: flex-start;
padding: 5px 5%;
}
.container .main-video {
background: #fff;
border-radius: 5px;
height: 520px;
padding: 10px;
}
.container .main-video iframe {
width: 100%;
border-radius: 5px;
height: 450px;
}
.container .main-video .title {
font-size: 24px;
padding-top: 15px;
padding-bottom: 15px;
color: #333;
}
.container .video-list {
overflow-x: hidden;
background: #fff;
border-radius: 5px;
height: 520px;
overflow-y: scroll;
}
.container .video-list::-webkit-scrollbar {
width: 7px;
}
.container .video-list::-webkit-scrollbar-track {
background: #ccc;
border-radius: 50px;
}
.container .video-list::-webkit-scrollbar-thumb {
background: #666;
border-radius: 50px;
}
.container .video-list .vid {
display: flex;
align-items: center;
gap: 15px;
background: #f7f7f7;
border-radius: 5px;
margin: 10px;
padding-top: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.container .video-list .vid:hover {
background: #eee;
}
.container .video-list .vid.active {
background: #2980b9;
}
.container .video-list .vid.active .title {
color: #fff;
word-break: break-all;
}
.container .video-list .vid .title {
color: #333;
font-size: 17px;
}
@media (max-width: 991px) {
.container {
grid-template-columns: 1.5fr 1fr;
padding: 10px;
}
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<h3 class="heading">Video gallery Youtube</h3>
<div class="container">
<div class="main-video">
<div class="video">
<iframe
src="https://www.youtube.com/embed/1ozmyl1ZEyY"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h3 class="title">Saaranga Dhariya .....</h3>
</div>
</div>
<div class="video-list">
<div class="vid active">
<iframe
src="https://www.youtube.com/embed/C70GJYVoZ4Y"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h3 class="title">Saaami Saami song .....</h3>
</div>
<div class="vid">
<iframe
src="https://www.youtube.com/embed/Bg8Yb9zGYyA"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h3 class="title">Raamulo raamula .....</h3>
</div>
<div class="vid">
<iframe
src="https://www.youtube.com/embed/x6Q7c9RyMzk"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h3 class="title">Rowdy baby .....</h3>
</div>
<div class="vid">
<iframe
src="https://www.youtube.com/embed/T69i-y14yDs"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h3 class="title">Leharaayi Leharaayi .....</h3>
</div>
<div class="vid">
<iframe
src="https://www.youtube.com/embed/2a34XyiZO14"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h3 class="title">Life of ram.....</h3>
</div>
<div class="vid">
<iframe
src="https://www.youtube.com/embed/hP93gA8F6sM"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h3 class="title">Oke oka lokam.....</h3>
</div>
<div class="vid">
<iframe
src="https://www.youtube.com/embed/cC8AmhPUJPA"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h3 class="title">Inkem Inkem Kaavale.....</h3>
</div>
<div class="vid">
<iframe
src="https://www.youtube.com/embed/_JVghQCWnRI"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<h3 class="title">Choosi choodangaane.....</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment