index.html

@@ -59,7 +59,6 @@
         <!-- Sidebar scroller start -->
     </div>
 
-
     <script>
         let listVideo= document.querySelectorAll('.video-list .vid');
         let mainVideo= document.querySelector('.main-video video')
@@ -68,16 +67,19 @@
             video.onclick = () =>{
                 listVideo.forEach(vid => vid.classList.remove('active'));
                 video.classList.add('active');
+                console.log("video",video)
+                let src = document.getElementsByClassName('active').item('video').children[0].currentSrc;
+                // let src = $('.active').children[0].currentSrc;
                 if(video.classList.contains('active')){
-                let src = video.children[0].getAttribute('src');
+                    // let src = video
+                    console.log("here is the src",src)
                     mainVideo.src = src;
                     let text = video.children[1].innerHTML;
                     title.innerHTML = text;
                 };
             };
         });
-
-    
     </script>
+
 </body>
 </html>

style.css

@@ -6,9 +6,11 @@
 	font-family: Verdana, Geneva, Tahoma, sans-serif;
 	font-weight: normal;
 }
+
 body {
 	background: #fff;
 }
+
 .heading {
 	color: dimgrey;
 	font-size: 40px;
@@ -23,16 +25,18 @@ body{
 	align-items: flex-start;
 	padding: 5px 5%;
 }
+
 .container .main-video {
 	background: white;
 	border-radius: 5px;
 	padding: 10px;
 }
+
 .container .main-video video {
 	width: 100%;
 	border-radius: 5px;
-
 }
+
 .container .main-video video .title {
 	color: grey;
 	font-size: 23px;
@@ -45,16 +49,13 @@ body{
 	border-radius: 5px;
 	height: 520px;
 	overflow-y: scroll;
-
-
 }
+
 .container .video-list .vid video {
 	width: 100%;
 	border-radius: 5px;
-
 }
 
-
 .container .main-video .title {
 	color: grey;
 	font-size: 23px;
@@ -62,34 +63,25 @@ body{
 	padding-bottom: 15px;
 }
 
-.container .video-list{
-    background: white;
-    border-radius: 5px;
-    height: 100%;
-    overflow-y: scroll;
-}
-
 .container .video-list::-webkit-scrollbar {
 	width: 7px;
 }
+
 .container .video-list::-webkit-scrollbar-track {
 	background: white;
 	border-radius: 50px;
-
 }
 
 .container .video-list::-webkit-scrollbar-thumb {
 	background: #ccc;
 	border-radius: 50px;
-    
 }
+
 .container .video-list .vid video {
 	width: 100px;
 	border-radius: 5px;
-
 }
 
-
 .container .video-list .vid {
 	display: flex;
 	gap: 15px;
@@ -101,6 +93,7 @@ body{
 	cursor: pointer;
 	flex-direction: column;
 }
+
 .container .video-list .vid:hover {
 	background: white;
 }
@@ -108,6 +101,7 @@ body{
 .container .video-list .vid.active {
 	background: #ccc;
 }
+
 .container .video-list .vid.active.title {
 	color: white;
 }
@@ -124,21 +118,14 @@ body{
 
 @media(max-width:994px) {
 	.container {
-        
 		grid-template-columns: 1.5fr 1fr;
-        
 		padding: 10px;
 	}
-
 }
+
 @media(max-width:778px) {
 	.container {
-        
 		grid-template-columns: 1fr;
-        
 		padding: 10px;
 	}
-
 }
-
-