Video Playlist UI Design Like Udemy

├── README.md ├── images ├── pause.svg └── play.svg ├── index.html ├── script.js ├── style.css └── videos ├── 3D popup card.mp4 ├── build gauge with css.mp4 ├── custom select box.mp4 ├── customize HTML5 form elements.mp4 ├── embed google map to contact form.mp4 ├── manipulate text background.mp4 └── password strength checker javascript web app.mp4 /README.md: -------------------------------------------------------------------------------- 1 | # Video-Playlist-Gallery-Like-Udemy-Skillshare-HTML-CSS-JavaScript 2 | 3 | ![video playlist UI design](https://i.ytimg.com/vi/b5mGe608DZ4/hqdefault.jpg) 4 | 5 | Let's build responsive Video Playlist like Udemy and Skill Share. Video playlist gallery UI design is most found in educational websites. So, let's create video playlist together with html css & vanilla javascript. 6 | 7 | > You can do whatever you want with the code. However if you love my content, you can **SUBSCRIBED** my YouTube Channel. 8 | 🌎link: www.youtube.com/codingdesign 9 | -------------------------------------------------------------------------------- /images/pause.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/play.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Video Playlist UI Design Like Udemy | SkillShare 17 | 18 | 19 | 20 | 21 |

22 |

23 |

24 |

Title of the playing Video.

25 |

26 | 27 |

28 |

Title of Video Playlist

29 |

10 lessions . 50m 48s

30 |

31 | 32 |

33 |

34 |

35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* 2 | 🎬 Video playlist UI Design like Skillshare With Vanilla JavaScript 3 | 👨🏻‍⚕️ By: Coding Design 4 | 5 | You can do whatever you want with the code. However if you love my content, you can subscribed my YouTube Channel 6 | 🌎link: www.youtube.com/codingdesign 7 | */ 8 | 9 | const main_video = document.querySelector('.main-video video'); 10 | const main_video_title = document.querySelector('.main-video .title'); 11 | const video_playlist = document.querySelector('.video-playlist .videos'); 12 | 13 | let data = [ 14 | { 15 | 'id': 'a1', 16 | 'title': 'manipulate text background', 17 | 'name': 'manipulate text background.mp4', 18 | 'duration': '2:47', 19 | }, 20 | { 21 | 'id': 'a2', 22 | 'title': 'build gauge with css', 23 | 'name': 'build gauge with css.mp4', 24 | 'duration': '2:45', 25 | }, 26 | { 27 | 'id': 'a3', 28 | 'title': '3D popup card', 29 | 'name': '3D popup card.mp4', 30 | 'duration': '24:49', 31 | }, 32 | 33 | { 34 | 'id': 'a4', 35 | 'title': 'customize HTML5 form elements', 36 | 'name': 'customize HTML5 form elements.mp4', 37 | 'duration': '3:59', 38 | }, 39 | { 40 | 'id': 'a5', 41 | 'title': 'custom select box', 42 | 'name': 'custom select box.mp4', 43 | 'duration': '4:25', 44 | }, 45 | { 46 | 'id': 'a6', 47 | 'title': 'embed google map to contact form', 48 | 'name': 'embed google map to contact form.mp4', 49 | 'duration': '5:33', 50 | }, 51 | { 52 | 'id': 'a7', 53 | 'title': 'password strength checker javascript web app', 54 | 'name': 'password strength checker javascript web app.mp4', 55 | 'duration': '0:29', 56 | }, 57 | 58 | { 59 | 'id': 'a8', 60 | 'title': 'custom range slider', 61 | 'name': 'custom range slider.mp4', 62 | 'duration': '1:12', 63 | }, 64 | { 65 | 'id': 'a9', 66 | 'title': 'animated shopping cart', 67 | 'name': 'animated shopping cart.mp4', 68 | 'duration': '3:38', 69 | }, 70 | 71 | ]; 72 | 73 | data.forEach((video, i) => { 74 | let video_element = ` 75 |

76 |

77 |

${i + 1 > 9 ? i + 1 : '0' + (i + 1)}.

78 |

${video.title}

79 |

${video.duration}

80 |

81 | `; 82 | video_playlist.innerHTML += video_element; 83 | }) 84 | 85 | let videos = document.querySelectorAll('.video'); 86 | videos[0].classList.add('active'); 87 | videos[0].querySelector('img').src = 'images/pause.svg'; 88 | 89 | videos.forEach(selected_video => { 90 | selected_video.onclick = () => { 91 | 92 | for (all_videos of videos) { 93 | all_videos.classList.remove('active'); 94 | all_videos.querySelector('img').src = 'images/play.svg'; 95 | 96 | } 97 | 98 | selected_video.classList.add('active'); 99 | selected_video.querySelector('img').src = 'images/pause.svg'; 100 | 101 | let match_video = data.find(video => video.id == selected_video.dataset.id); 102 | main_video.src = 'videos/' + match_video.name; 103 | main_video_title.innerHTML = match_video.title; 104 | } 105 | }); 106 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 🎬 Video playlist UI Design like Skillshare With Vanilla JavaScript 3 | 👨🏻‍⚕️ By: Coding Design 4 | 5 | You can do whatever you want with the code. However if you love my content, you can subscribed my YouTube Channel 6 | 🌎link: www.youtube.com/codingdesign 7 | */ 8 | 9 | :root { 10 | --primary : linear-gradient(to bottom right, #0a0057, #3f00ee); 11 | --secondary : gold; 12 | --text : #fff; 13 | } 14 | 15 | * { 16 | margin: 0; 17 | padding: 0; 18 | box-sizing: border-box; 19 | } 20 | 21 | body { 22 | min-height: 100vh; 23 | background-image: var(--primary); 24 | font-family: sans-serif; 25 | color: var(--text); 26 | 27 | display: flex; 28 | align-items: center; 29 | } 30 | 31 | .container { 32 | width: 100vw; 33 | 34 | display: grid; 35 | grid-template-columns: 1.8fr 1.2fr; 36 | gap: 1rem; 37 | 38 | padding: .5rem 1rem; 39 | text-transform: capitalize; 40 | } 41 | 42 | @media screen and (max-width: 990px) { 43 | .container { 44 | grid-template-columns: 1fr; 45 | } 46 | } 47 | 48 | .main-video, .video-playlist { 49 | width: 100%; 50 | height: 30rem; 51 | } 52 | 53 | .main-video .title { 54 | margin-top: 1rem; 55 | } 56 | 57 | .video-playlist .title { 58 | padding-left: 1rem; 59 | } 60 | 61 | .video-playlist > p { 62 | padding: 1rem; 63 | color: var(--secondary); 64 | } 65 | 66 | .video-playlist .videos{ 67 | height: 70%; 68 | overflow-y: auto; 69 | } 70 | 71 | .video-playlist .videos::-webkit-scrollbar { 72 | width: .4rem; 73 | border-radius: .4rem; 74 | background-color: #0005; 75 | } 76 | 77 | .video-playlist .videos::-webkit-scrollbar-thumb { 78 | border-radius: .4rem; 79 | background-color: #fff; 80 | } 81 | 82 | .video-playlist .videos .video { 83 | position: relative; 84 | width: 100%; 85 | height: 4rem; 86 | 87 | display: flex; 88 | justify-content: center; 89 | align-items: center; 90 | 91 | padding: 0 1rem; 92 | margin-top: .1rem; 93 | cursor: pointer; 94 | 95 | border-radius: .5rem; 96 | } 97 | 98 | .video-playlist .videos .video:hover { 99 | background-color: #0003; 100 | } 101 | 102 | .video-playlist .videos .video.active { 103 | background-color: #0003; 104 | color: var(--secondary); 105 | } 106 | 107 | .main-video video { 108 | width: 100%; 109 | border-radius: .5rem; 110 | } 111 | 112 | .video img { 113 | position: absolute; 114 | left: 1rem; 115 | top: 50%; 116 | transform: translateY(-50%); 117 | 118 | width: 1.5rem; 119 | height: 1.5rem; 120 | 121 | filter: invert(100%); 122 | } 123 | 124 | .video-playlist .videos .video.active img { 125 | filter: invert(100%) sepia(100%) saturate(2000%) hue-rotate(360deg); 126 | } 127 | 128 | .video p { 129 | margin-left: 2.5rem; 130 | } 131 | 132 | .video h3 { 133 | width: 23rem; 134 | white-space: nowrap; 135 | overflow: hidden; 136 | text-overflow: ellipsis; 137 | 138 | font: 100 1rem sans-serif; 139 | padding: 0 .5rem; 140 | } 141 | -------------------------------------------------------------------------------- /videos/3D popup card.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Video-Playlist-Gallery-Like-Udemy-Skillshare-HTML-CSS-JavaScript/270c52f042e25a1a287b5ea3a301ef2c5de56c8a/videos/3D popup card.mp4 -------------------------------------------------------------------------------- /videos/build gauge with css.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Video-Playlist-Gallery-Like-Udemy-Skillshare-HTML-CSS-JavaScript/270c52f042e25a1a287b5ea3a301ef2c5de56c8a/videos/build gauge with css.mp4 -------------------------------------------------------------------------------- /videos/custom select box.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Video-Playlist-Gallery-Like-Udemy-Skillshare-HTML-CSS-JavaScript/270c52f042e25a1a287b5ea3a301ef2c5de56c8a/videos/custom select box.mp4 -------------------------------------------------------------------------------- /videos/customize HTML5 form elements.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Video-Playlist-Gallery-Like-Udemy-Skillshare-HTML-CSS-JavaScript/270c52f042e25a1a287b5ea3a301ef2c5de56c8a/videos/customize HTML5 form elements.mp4 -------------------------------------------------------------------------------- /videos/embed google map to contact form.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Video-Playlist-Gallery-Like-Udemy-Skillshare-HTML-CSS-JavaScript/270c52f042e25a1a287b5ea3a301ef2c5de56c8a/videos/embed google map to contact form.mp4 -------------------------------------------------------------------------------- /videos/manipulate text background.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Video-Playlist-Gallery-Like-Udemy-Skillshare-HTML-CSS-JavaScript/270c52f042e25a1a287b5ea3a301ef2c5de56c8a/videos/manipulate text background.mp4 -------------------------------------------------------------------------------- /videos/password strength checker javascript web app.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JeetSaru/Video-Playlist-Gallery-Like-Udemy-Skillshare-HTML-CSS-JavaScript/270c52f042e25a1a287b5ea3a301ef2c5de56c8a/videos/password strength checker javascript web app.mp4 --------------------------------------------------------------------------------