fix ui issue

index.html

@@ -59,8 +59,7 @@
         <!-- Sidebar scroller start -->
     </div>
 
-
-<script>
+    <script>
         let listVideo= document.querySelectorAll('.video-list .vid');
         let mainVideo= document.querySelector('.main-video video')
         let title = document.querySelector('.main-video .title')
@@ -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>
 
-    
-</script>
 </body>
 </html>

style.css

@@ -1,4 +1,4 @@
-*{
+* {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
@@ -6,91 +6,83 @@
 	font-family: Verdana, Geneva, Tahoma, sans-serif;
 	font-weight: normal;
 }
-body{
+
+body {
 	background: #fff;
 }
-.heading{
+
+.heading {
 	color: dimgrey;
 	font-size: 40px;
 	/*text-align: center;*/
 	padding: 10px;
 }
 
-.container{
+.container {
 	display: grid;
 	grid-template-columns: 2fr 1fr;
 	gap: 15px;
 	align-items: flex-start;
 	padding: 5px 5%;
 }
-.container .main-video{
+
+.container .main-video {
 	background: white;
 	border-radius: 5px;
 	padding: 10px;
 }
-.container .main-video video{
+
+.container .main-video video {
 	width: 100%;
 	border-radius: 5px;
-
 }
-.container .main-video video .title{
+
+.container .main-video video .title {
 	color: grey;
 	font-size: 23px;
 	padding-top: 15px;
 	padding-bottom: 15px;
 }
 
-.container .video-list{
+.container .video-list {
 	background: white;
 	border-radius: 5px;
 	height: 520px;
 	overflow-y: scroll;
-
-
 }
-.container .video-list .vid video{
+
+.container .video-list .vid video {
 	width: 100%;
 	border-radius: 5px;
-
 }
 
-
-.container .main-video .title{
+.container .main-video .title {
 	color: grey;
 	font-size: 23px;
 	padding-top: 15px;
 	padding-bottom: 15px;
 }
 
-.container .video-list{
-    background: white;
-    border-radius: 5px;
-    height: 100%;
-    overflow-y: scroll;
-}
-
-.container .video-list::-webkit-scrollbar{
+.container .video-list::-webkit-scrollbar {
 	width: 7px;
 }
-.container .video-list::-webkit-scrollbar-track{
+
+.container .video-list::-webkit-scrollbar-track {
 	background: white;
 	border-radius: 50px;
-
 }
 
-.container .video-list::-webkit-scrollbar-thumb{
+.container .video-list::-webkit-scrollbar-thumb {
 	background: #ccc;
 	border-radius: 50px;
-    
 }
-.container .video-list .vid video{
+
+.container .video-list .vid video {
 	width: 100px;
 	border-radius: 5px;
-
 }
 
-
-.container .video-list .vid{
+.container .video-list .vid {
 	display: flex;
 	gap: 15px;
 	background: white;
@@ -101,18 +93,20 @@ body{
 	cursor: pointer;
 	flex-direction: column;
 }
-.container .video-list .vid:hover{
+
+.container .video-list .vid:hover {
 	background: white;
 }
 
-.container .video-list .vid.active{
+.container .video-list .vid.active {
 	background: #ccc;
 }
-.container .video-list .vid.active.title{
+
+.container .video-list .vid.active.title {
 	color: white;
 }
 
-.container .video-list .vid .title{
+.container .video-list .vid .title {
 	color: grey;
 	font-size: 17px;
 }
@@ -122,23 +116,16 @@ body{
 	border-radius: 5px;
 }
 
-@media(max-width:994px){
-    .container{
-        
+@media(max-width:994px) {
+	.container {
 		grid-template-columns: 1.5fr 1fr;
-        
 		padding: 10px;
 	}
-
 }
-@media(max-width:778px){
-    .container{
 
+@media(max-width:778px) {
+	.container {
 		grid-template-columns: 1fr;
-        
 		padding: 10px;
 	}
-
 }
-
-