Video Gallery-Mr. Web Designer

SVNANGKORWAT 0 تعليقات 



<!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

Tags

Post a Comment

إرسال تعليق

أحدث أقدم