<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="video-links-container">
<a href="images/video-1.mp4" class="video-links">01. click here to play the video</a>
<a href="images/video-2.mp4" class="video-links">02. click here to play the video</a>
<a href="images/video-3.mp4" class="video-links">03. click here to play the video</a>
<a href="images/video-4.mp4" class="video-links">04. click here to play the video</a>
<a href="images/video-5.mp4" class="video-links">05. click here to play the video</a>
<a href="images/video-6.mp4" class="video-links">06. click here to play the video</a>
<a href="images/video-7.mp4" class="video-links">07. click here to play the video</a>
<a href="images/video-8.mp4" class="video-links">08. click here to play the video</a>
</div>
<div class="video-container">
<video src="images/video-1.mp4" loop muted controls class="video"></video>
</div>
</div>
<script>
document.querySelectorAll('.video-links').forEach(links =>{
links.addEventListener('click', (e) =>{
e.preventDefault();
var src = links.getAttribute('href');
document.querySelector('.video').src = src;
document.querySelector('.video').play();
});
});
</script>
</body>
</html>
<style>
*{
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
text-transform: capitalize;
font-family: Arial, Helvetica, sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background:linear-gradient(#eee 50%, #ccc 50.1%);
padding:20px 7%;
padding-bottom: 70px;
}
.container{
display: flex;
flex-wrap: wrap-reverse;
gap:5px;
border-radius: 5px;
background:#fff;
padding:20px;
}
.container .video-links-container{
flex:1 1 400px;
}
.container .video-container{
flex:1 1 400px;
}
.container .video-container .video{
height: 100%;
width: 100%;
object-fit: cover;
border:2px solid #333;
border-radius: 5px;
}
.container .video-links-container .video-links{
font-size: 20px;
color:#333;
border:2px solid #333;
border-radius: 5px;
display: block;
padding:10px 15px;
margin-bottom: 5px;
}
.container .video-links-container .video-links:nth-child(odd){
background:#eee;
}
.container .video-links-container .video-links:hover{
background:#666;
color:#fff;
}
</style>
https://drive.google.com/uc?export=download&id=1O3gl1G6ij4Fgw-bPtKVWyFeMinqw8Q6I
https://drive.google.com/uc?export=download&id=106Npz_AOfyVYARAWf2Y5G87JQ94Moixs
https://drive.google.com/uc?export=download&id=1-qNt5rsgfykxCvU4zQwJPLpipuCqoOx8
https://drive.google.com/uc?export=download&id=1Tmt1RmtxHs-eXaHGvsGBso3dcwUR-kKg
https://drive.google.com/uc?export=download&id=1RuQRhJycyxto3ilx579tzGfqmV0CvPZR
https://drive.google.com/uc?export=download&id=10d3DyBJrNFfxebu8o1inAL4errOjpDmu
https://drive.google.com/uc?export=download&id=16S3UTxQh6KarCgvoyFR75zLX9PZW5DDR
https://drive.google.com/uc?export=download&id=1_7sk1R2JTmpfTbfTJ6ehZHBVE3YrPyF9
Post a Comment