-
-
-
@@ -64,22 +69,24 @@
let mainVideo= document.querySelector('.main-video video')
let title = document.querySelector('.main-video .title')
listVideo.forEach(video =>{
- 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
- console.log("here is the src",src)
- mainVideo.src = src;
- let text = video.children[1].innerHTML;
- title.innerHTML = text;
+ if(video){
+ video.onclick = () =>{
+ listVideo.forEach(vid => vid.classList.remove('active'));
+ video.classList.add('active');
+ let src = document.getElementsByClassName('active').item('img').children[0].attributes['data-video'].nodeValue;
+ // let vtt = document.getElementsByClassName('active').item('img').children[0].attributes['data-vtt'].nodeValue;
+ let poster = document.getElementsByClassName('active').item('img').children[0].src;
+ if(video.classList.contains('active')){
+ mainVideo.src = src;
+ mainVideo.children[0].attributes['src'].nodeValue = src;
+ // mainVideo.children[1].attributes['src'].nodeValue = vtt;
+ mainVideo.poster = poster;
+ let text = video.children[1].innerHTML;
+ title.innerHTML = text;
+ };
};
- };
+ }
});
-
-
\ No newline at end of file
+
diff --git a/style.css b/style.css
index f257b35..9fbb0bf 100644
--- a/style.css
+++ b/style.css
@@ -9,12 +9,12 @@
body {
background: #fff;
+ overflow: hidden;
}
.heading {
color: dimgrey;
font-size: 40px;
- /*text-align: center;*/
padding: 10px;
}
@@ -47,7 +47,7 @@ body {
.container .video-list {
background: white;
border-radius: 5px;
- height: 520px;
+ height: 100vh;
overflow-y: scroll;
}