├── images ├── bell.png ├── grid.png ├── home.png ├── logo.png ├── search.png ├── video.png ├── explore.png ├── history.png ├── library.png ├── show more.png ├── liked video.png ├── profile-pic.png ├── search-logo.png ├── watch-later.png ├── your-video.png └── subscription.png ├── componnents ├── redirect.js ├── filter.js └── navbar.js ├── info.html ├── video.html ├── function └── showvideo.js ├── content.html ├── index.html ├── info.css ├── my.js ├── app.js ├── content.js ├── README.md ├── video.css ├── style.css └── video.js /images/bell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/bell.png -------------------------------------------------------------------------------- /images/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/grid.png -------------------------------------------------------------------------------- /images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/home.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/search.png -------------------------------------------------------------------------------- /images/video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/video.png -------------------------------------------------------------------------------- /images/explore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/explore.png -------------------------------------------------------------------------------- /images/history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/history.png -------------------------------------------------------------------------------- /images/library.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/library.png -------------------------------------------------------------------------------- /images/show more.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/show more.png -------------------------------------------------------------------------------- /images/liked video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/liked video.png -------------------------------------------------------------------------------- /images/profile-pic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/profile-pic.png -------------------------------------------------------------------------------- /images/search-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/search-logo.png -------------------------------------------------------------------------------- /images/watch-later.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/watch-later.png -------------------------------------------------------------------------------- /images/your-video.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/your-video.png -------------------------------------------------------------------------------- /images/subscription.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubh2-0/Youtube-Clone/HEAD/images/subscription.png -------------------------------------------------------------------------------- /componnents/redirect.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const jump =()=>{ 4 | 5 | return function redirect(){ 6 | 7 | let search_term=document.getElementById("videoname").value 8 | 9 | localStorage.setItem("search_term",search_term) 10 | 11 | window.location.href="content.html" 12 | 13 | } 14 | 15 | 16 | } 17 | 18 | export default jump 19 | 20 | -------------------------------------------------------------------------------- /info.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /componnents/filter.js: -------------------------------------------------------------------------------- 1 | 2 | const filter=()=>{ 3 | 4 | return ` 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | ` 25 | 26 | } 27 | 28 | export default filter -------------------------------------------------------------------------------- /video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 |
22 | 23 | 24 |
25 | 26 |
27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | 40 |
41 | 42 | 43 | 44 |
45 | 46 | 47 | 48 | 49 |
50 | 51 | 52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /componnents/navbar.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | const navbar = () =>{ 5 | 6 | return ` 7 | 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 |
35 | 36 |
37 |
38 | 39 | ` 40 | 41 | 42 | } 43 | 44 | 45 | export default navbar -------------------------------------------------------------------------------- /function/showvideo.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const show1 = () =>{ 4 | 5 | return async function show (){ 6 | 7 | let API_KEYS =["AIzaSyASPLAWmjCPDRoiMtt1AHGQ0TGyRx9wTRU","AIzaSyASPLAWmjCPDRoiMtt1AHGQ0TGyRx9wTRU","AIzaSyBihnXKUmx9h6DHAlTNkrZ-6znzrz3ME1M","AIzaSyA8HVQEsyROLmeZ4P3GhKRCU2BajTnJUNc","AIzaSyAgE8JOY06kJSUxBYYXCGKhQnhx1qD8jdA"] 8 | 9 | let num= Math.floor(Math.random()*2) 10 | 11 | let API_KEY = API_KEYS[num] 12 | 13 | let search=document.getElementById("videoname").value 14 | 15 | let data = await fetch(`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&q=${search}&key=AIzaSyCGz_8bE32q4NAkjdAXjpAiigBS6z9ZASU`) 16 | 17 | data = await data.json() 18 | 19 | let actual_data = data.items 20 | 21 | console.log(actual_data) 22 | 23 | content_show(actual_data) 24 | 25 | } 26 | 27 | 28 | 29 | 30 | const store =(el)=>{ 31 | 32 | localStorage.setItem("video_data",JSON.stringify(el)) 33 | window.location.href="video.html" 34 | 35 | } 36 | 37 | function content_show(data){ 38 | 39 | let parent = document.querySelector(".container") 40 | 41 | document.querySelector(".container").innerHTML=null 42 | 43 | for(let el of data){ 44 | let child = document.createElement("div") 45 | child.className="video" 46 | 47 | child.addEventListener("click",function(){ 48 | store(el) 49 | 50 | }) 51 | 52 | 53 | 54 | child.innerHTML = ` 55 | 56 |
57 | 58 |
59 |

${el.snippet.title}

60 |

${el.snippet.channelTitle}

61 |
62 |
` 63 | parent.append(child) 64 | 65 | } 66 | } 67 | 68 | 69 | } 70 | 71 | export default show1 -------------------------------------------------------------------------------- /content.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Youtube 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |

Home

 26 |

Explore

 27 |

Subscription

 28 | 29 |
30 | 31 |

Library

 32 |

History

 33 |

Your videos

 34 |

Watch later

 35 |

Liked videos

 36 |

Show more

 37 |
38 | 39 | 40 |
41 | 42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Youtube 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |

Home

 26 |

Explore

 27 |

Subscription

 28 | 29 |
30 | 31 |

Library

 32 |

History

 33 |

Your videos

 34 |

Watch later

 35 |

Liked videos

 36 |

Show more

 37 |
38 | 39 | 40 |
41 | 42 | 43 |
44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /info.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | #container{ 4 | width: 70%; 5 | } 6 | #video_heading{ 7 | font-size: 20px; 8 | font-weight: 700; 9 | font-family: sans-serif; 10 | } 11 | #info-section{ 12 | display: flex; 13 | height: 80px; 14 | justify-content: space-between; 15 | } 16 | #section-1{ 17 | display: flex; 18 | } 19 | 20 | #section-1 p{ 21 | font-family: sans-serif; 22 | } 23 | 24 | #subscribers{ 25 | color: gray; 26 | font-size: 13px; 27 | } 28 | #section-1>div{ 29 | height: 100%; 30 | } 31 | 32 | #swction-1 #channel_image{ 33 | border-radius: 50%; 34 | overflow: hidden; 35 | background-color :#00947F; 36 | } 37 | 38 | 39 | #channel_image img{ 40 | width: 60%; 41 | border-radius: 50%; 42 | display: flex; 43 | align-items: center; 44 | margin-top: 10px; 45 | } 46 | 47 | 48 | #sunscribbtn{ 49 | display: flex; 50 | align-items: center; 51 | margin-left: 30px; 52 | font-size: 17px; 53 | } 54 | 55 | #sunscribbtn button{ 56 | font-size: 17px; 57 | border-radius: 30px; 58 | border: none; 59 | padding: 10px 20px; 60 | background-color: rgb(240, 230, 230); 61 | } 62 | 63 | #section-2{ 64 | display: flex; 65 | align-items: center; 66 | gap: 5px; 67 | } 68 | #section-2 button{ 69 | height: 50%; 70 | font-size: 15px; 71 | border-radius: 20px; 72 | padding: 0px 20px; 73 | border: none; 74 | 75 | } 76 | 77 | #section-1 button:hover{ 78 | background-color: rgb(201, 195, 195); 79 | color: white; 80 | } 81 | 82 | #section-2 > #like{ 83 | border-radius: 0%; 84 | border-radius: 20px 0px 0px 20px; 85 | margin-left: 0; 86 | } 87 | #section-2 > #dislike{ 88 | border-radius: 0%; 89 | border-radius: 0px 20px 20px 0px; 90 | margin-left: -3%; 91 | border-left: 1px solid rgb(214, 196, 196); 92 | } 93 | button:hover{ 94 | background-color: rgb(201, 195, 195); 95 | color: white; 96 | cursor: pointer; 97 | } 98 | #decription{ 99 | background-color: rgb(227, 233, 238); 100 | width: 70%; 101 | height: 400px; 102 | border-radius: 50px; 103 | padding: 20px; 104 | 105 | } -------------------------------------------------------------------------------- /my.js: -------------------------------------------------------------------------------- 1 | 2 | document.getElementById("searchbtn").addEventListener("click",show) 3 | 4 | 5 | async function show (){ 6 | 7 | let API_KEYS =["AIzaSyASPLAWmjCPDRoiMtt1AHGQ0TGyRx9wTRU","AIzaSyASPLAWmjCPDRoiMtt1AHGQ0TGyRx9wTRU","AIzaSyBihnXKUmx9h6DHAlTNkrZ-6znzrz3ME1M","AIzaSyA8HVQEsyROLmeZ4P3GhKRCU2BajTnJUNc","AIzaSyAgE8JOY06kJSUxBYYXCGKhQnhx1qD8jdA"] 8 | 9 | let num= Math.floor(Math.random()*3) 10 | 11 | let API_KEY = API_KEYS[num] 12 | 13 | let search=document.getElementById("videoname").value 14 | 15 | let data = await fetch(`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&q=${search}&key=${API_KEY}`) 16 | 17 | data = await data.json() 18 | 19 | console.log(data) 20 | 21 | } 22 | 23 | https://www.googleapis.com/youtube/v3/channels?& 24 | 25 | 26 | const ghy = async (data)=> { 27 | 28 | 29 | 30 | } 31 | 32 | 33 | 34 | 35 | 36 | 37 | // empty() 38 | 39 | 40 | 41 | 42 | // function empty(){ 43 | 44 | // let api_key="AIzaSyCGz_8bE32q4NAkjdAXjpAiigBS6z9ZASU"; 45 | // let channel_http="https://www.googleapis.com/youtube/v3/channels?&" 46 | 47 | 48 | // async function empty(){ 49 | 50 | // let contebt= await fetch(`https://www.googleapis.com/youtube/v3/videos?&key=${api_key}&part=snippet&chart=mostPopular&maxResults=50®ionCode=IN`) 51 | 52 | // let d= await contebt.json() 53 | 54 | // console.log(d) 55 | 56 | // // getChannelIcon(d.items) 57 | // } 58 | 59 | 60 | 61 | 62 | // // const getChannelIcon = (video_data) => { 63 | // // fetch(channel_http + new URLSearchParams({ 64 | // // key: api_key, 65 | // // part: "snippet", 66 | // // id: video_data.snippet.channelId 67 | // // })) 68 | // // .then(res => res.json()) 69 | // // .then(data => { 70 | // // video_data.channelThumbnail = data.items[0].snippet.thumbnails.default.url 71 | // // videosicon(video_data) 72 | // // }) 73 | // // } 74 | // // } 75 | 76 | 77 | 78 | 79 | 80 | // const videosicon = (data) => { 81 | 82 | // for(let el of data){ 83 | 84 | // let child=document.createElement("div") 85 | // child.className="video" 86 | 87 | // child.innerHTML=` 88 | // 89 | //
90 | // 91 | //
92 | //

${el.snippet.title}

93 | //

${el.snippet.channelTitle}

94 | //
95 | //
96 | // ` 97 | 98 | // parent.append(child) 99 | // } 100 | // } 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | 2 | import nvbr from "./componnents/navbar.js" 3 | document.getElementById("navbar").innerHTML =nvbr() 4 | 5 | 6 | import filterbtn from "./componnents/filter.js" 7 | document.getElementById("filtersdiv").innerHTML=filterbtn() 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | async function content_show(data){ 16 | 17 | document.querySelector(".container").innerHTML=null 18 | 19 | let parent = document.querySelector(".container") 20 | 21 | 22 | 23 | for(let el of data){ 24 | let child = document.createElement("div") 25 | child.className="video" 26 | 27 | child.addEventListener("click",function(){ 28 | store(el) 29 | }) 30 | 31 | let channel_picture = await channel(el.snippet.channelId) 32 | 33 | 34 | child.innerHTML = ` 35 | 36 |
37 | 38 |
39 |

${el.snippet.title}

40 |

${el.snippet.channelTitle}

41 |
42 |
` 43 | parent.append(child) 44 | 45 | } 46 | } 47 | 48 | 49 | 50 | 51 | const store =(el)=>{ 52 | 53 | localStorage.setItem("video_data",JSON.stringify(el)) 54 | window.location.href="video.html" 55 | 56 | } 57 | 58 | 59 | 60 | 61 | 62 | 63 | import jump from "./componnents/redirect.js" 64 | 65 | document.getElementById("searchbtn").addEventListener("click" , jump()) 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | const empty=async()=>{ 76 | let data=await fetch(`https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular®ionCode=IN&maxResults=50&key=AIzaSyBihnXKUmx9h6DHAlTNkrZ-6znzrz3ME1M`) 77 | 78 | data=await data.json() 79 | 80 | content_show(data.items) 81 | } 82 | 83 | empty() 84 | 85 | const channel= async (channelid)=>{ 86 | 87 | let g= await fetch ( ` https://www.googleapis.com/youtube/v3/channels?part=snippet&id=${channelid}&key=AIzaSyA8HVQEsyROLmeZ4P3GhKRCU2BajTnJUNc` ) 88 | 89 | g = await g.json() 90 | 91 | let url = await g.items[0].snippet.thumbnails.high.url 92 | 93 | return await url 94 | 95 | } 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | const change =async (el)=>{ 117 | 118 | 119 | 120 | let value=el.innerHTML 121 | 122 | let data = await fetch(`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&q=${value}&key=AIzaSyCGz_8bE32q4NAkjdAXjpAiigBS6z9ZASU`) 123 | data = await data.json() 124 | 125 | let actual_data = data.items 126 | 127 | content_show(actual_data) 128 | } 129 | 130 | 131 | 132 | 133 | let arr = document.querySelectorAll("#filtersdiv>button") 134 | 135 | for(let el of arr){ 136 | 137 | el.addEventListener("click",function(){ 138 | change(el) 139 | }) 140 | 141 | 142 | } 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /content.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import nvbr from "./componnents/navbar.js" 4 | document.getElementById("navbar").innerHTML =nvbr() 5 | 6 | 7 | import filterbtn from "./componnents/filter.js" 8 | document.getElementById("filtersdiv").innerHTML=filterbtn() 9 | 10 | 11 | 12 | 13 | 14 | 15 | import jump from "./componnents/redirect.js" 16 | 17 | document.getElementById("searchbtn").addEventListener("click" , jump()) 18 | 19 | 20 | 21 | async function content_show(data){ 22 | 23 | let parent = document.querySelector(".container") 24 | 25 | document.querySelector(".container").innerHTML=null 26 | 27 | for(let el of data){ 28 | let child = document.createElement("div") 29 | child.className="video" 30 | 31 | child.addEventListener("click",function(){ 32 | store(el) 33 | }) 34 | 35 | 36 | 37 | let channel_picture = await channel(el.snippet.channelId) 38 | 39 | 40 | child.innerHTML = ` 41 | 42 |
43 | 44 |
45 |

${el.snippet.title}

46 |

${el.snippet.channelTitle}

47 |
48 |
` 49 | parent.append(child) 50 | 51 | } 52 | } 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | const show= async ()=>{ 64 | 65 | let API_KEYS =["AIzaSyASPLAWmjCPDRoiMtt1AHGQ0TGyRx9wTRU","AIzaSyASPLAWmjCPDRoiMtt1AHGQ0TGyRx9wTRU","AIzaSyBihnXKUmx9h6DHAlTNkrZ-6znzrz3ME1M","AIzaSyA8HVQEsyROLmeZ4P3GhKRCU2BajTnJUNc","AIzaSyAgE8JOY06kJSUxBYYXCGKhQnhx1qD8jdA"] 66 | 67 | let num= Math.floor(Math.random()*2) 68 | 69 | let API_KEY = API_KEYS[num] 70 | 71 | let search = localStorage.getItem("search_term") 72 | 73 | 74 | let data = await fetch(`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&q=${search}&key=${API_KEY}`) 75 | 76 | data = await data.json() 77 | 78 | let actual_data = data.items 79 | 80 | console.log(actual_data) 81 | 82 | content_show(actual_data) 83 | } 84 | 85 | 86 | 87 | 88 | const store =(el)=>{ 89 | 90 | localStorage.setItem("video_data",JSON.stringify(el)) 91 | window.location.href="video.html" 92 | 93 | } 94 | 95 | 96 | show() 97 | 98 | 99 | const change =async (el)=>{ 100 | let value=el.innerHTML 101 | 102 | let data = await fetch(`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&q=${value}&key=AIzaSyCGz_8bE32q4NAkjdAXjpAiigBS6z9ZASU`) 103 | data = await data.json() 104 | 105 | let actual_data = data.items 106 | 107 | console.log(actual_data) 108 | 109 | content_show(actual_data) 110 | } 111 | 112 | 113 | 114 | 115 | let arr=document.querySelectorAll(".filter-options") 116 | 117 | for(let el of arr){ 118 | 119 | el.addEventListener("click",function(){ 120 | change(el) 121 | }) 122 | } 123 | 124 | 125 | 126 | 127 | 128 | const channel= async (channelid)=>{ 129 | 130 | let g= await fetch ( ` https://www.googleapis.com/youtube/v3/channels?part=snippet&id=${channelid}&key=AIzaSyA8HVQEsyROLmeZ4P3GhKRCU2BajTnJUNc` ) 131 | 132 | g = await g.json() 133 | 134 | let url = await g.items[0].snippet.thumbnails.high.url 135 | 136 | return await url 137 | 138 | } 139 | 140 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Youtube Clone 📽 2 | 3 | 🚀 Welcome to the Youtube Clone project! 🎉🎥 4 | 5 | This amazing project allows users to search for videos, watch them in fullscreen mode, control playback (play, pause), adjust playback speed (slow down or speed up), and search for videos using keywords. Get ready for an exciting and immersive video experience! 🌟📺 6 | 7 | 8 | 9 | 10 | ## Features 11 | 12 | 🔍 **Video Search**: Users can easily search for videos by entering keywords. The application leverages the power of the Youtube API to fetch relevant search results and display them in a user-friendly manner. 13 | 14 | 📺 **Fullscreen Mode**: Immerse yourself in the world of videos by enjoying them in fullscreen mode. It's like having a mini-cinema right at your fingertips! 🎬 15 | 16 | ⏯️ **Playback Control**: Take charge of your video-watching experience with playback control. Pause and resume videos with ease, allowing you to savor every moment of your favorite content. ⏯️ 17 | 18 | ⏩⏪ **Playback Speed**: Want to breeze through a tutorial or slow down a thrilling action scene? No problem! Our playback speed feature lets you adjust the video speed to match your preferences. Speed up or slow down, the choice is yours! ⚡ 19 | 20 | ## Tech Stack 21 | 22 | The Youtube Clone project harnesses the power of these amazing technologies: 23 | 24 | | JavaScript | HTML | CSS | Youtube API | 25 | |:--------------:|:--------------:|:--------------:|:--------------:| 26 | | JavaScript | HTML | CSS | Youtube API | 27 | 28 | ## Project Link 29 | 30 | What are you waiting for? Dive into the Youtube Clone project right away! Click the link below and let the adventure begin! 🎉🔗 31 | 32 | [Let's Explore the Youtube Clone!](https://genuine-sable-69c1a0.netlify.app/) 33 | 34 | ## Contribution 35 | 36 | We welcome contributions to the Youtube Clone project. If you're passionate about web development and want to make this project even more awesome, here's how you can contribute: 37 | 38 | 1. Fork the repository. 39 | 2. Make your desired changes and improvements in your forked repository. 40 | 3. Submit a pull request, explaining the changes you've made and their benefits. 41 | 42 | Together, we can take the Youtube Clone to new heights and create an incredible user experience for video enthusiasts around the world! 🌟🌍🚀 43 | 44 | ## 📬 Contact 45 | 46 | If you want to contact me, you can reach me through below handles. 47 | 48 |

49 | linkedin  50 | mail-me  51 | whatsapp-me  52 |

53 | 54 |
55 | 56 |
57 | 💓 Enjoy the videos, unleash your creativity, and have a blast! 🎥 58 |
59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /video.css: -------------------------------------------------------------------------------- 1 | 2 | #parent{ 3 | margin: 70px 0px 0px 10px; 4 | display: flex; 5 | height: 550px; 6 | gap: 10px; 7 | } 8 | #first-child{ 9 | width: 70%; 10 | } 11 | #first-child iframe{ 12 | width: 100%; 13 | height: 100%; 14 | } 15 | #container{ 16 | width: 70%; 17 | padding: 10px; 18 | } 19 | #video_heading{ 20 | font-size: 20px; 21 | font-weight: 700; 22 | font-family: sans-serif; 23 | width: 90%; 24 | line-height: 25px; 25 | } 26 | 27 | #video_heading2{ 28 | 29 | color: blue; 30 | 31 | } 32 | 33 | #info-section{ 34 | display: flex; 35 | height: 100%; 36 | justify-content: space-between; 37 | align-items: center; 38 | margin: 10px 0px; 39 | } 40 | 41 | #info-section button:hover{ 42 | cursor: pointer; 43 | background: rgb(223, 221, 221); 44 | } 45 | 46 | 47 | 48 | #section-1{ 49 | display: flex; 50 | align-items: center; 51 | } 52 | 53 | #section-1 p{ 54 | font-family: sans-serif; 55 | } 56 | 57 | #subscribers{ 58 | color: gray; 59 | font-size: 13px; 60 | } 61 | #section-1>div{ 62 | height: 100%; 63 | } 64 | 65 | 66 | 67 | 68 | #channel_image img{ 69 | width: 60%; 70 | border-radius: 50%; 71 | display: flex; 72 | align-items: center; 73 | margin-top: 10px; 74 | } 75 | 76 | 77 | #sunscribbtn{ 78 | display: flex; 79 | align-items: center; 80 | margin-left: 30px; 81 | font-size: 17px; 82 | } 83 | 84 | #sunscribbtn button{ 85 | font-size: 17px; 86 | border-radius: 30px; 87 | border: none; 88 | padding: 10px 20px; 89 | background-color: rgb(200, 200, 200); 90 | } 91 | 92 | #section-2{ 93 | display: flex; 94 | align-items: center; 95 | gap: 5px; 96 | } 97 | #section-2 button{ 98 | height: 50%; 99 | font-size: 15px; 100 | border-radius: 20px; 101 | padding: 10px 20px; 102 | border: none; 103 | background: rgb(200, 200, 200); 104 | 105 | } 106 | 107 | 108 | 109 | #section-2 > #like{ 110 | border-radius: 0%; 111 | border-radius: 20px 0px 0px 20px; 112 | margin-left: 0; 113 | } 114 | #section-2 > #dislike{ 115 | border-radius: 0%; 116 | border-radius: 0px 20px 20px 0px; 117 | margin-left: -3%; 118 | border-left: 1px solid rgb(178, 166, 166); 119 | } 120 | #decription{ 121 | background-color: rgb(227, 233, 238); 122 | width: 70%; 123 | height: 400px; 124 | border-radius: 50px; 125 | padding: 20px; 126 | } 127 | #second-child{ 128 | width: 30%; 129 | } 130 | 131 | #second-child button{ 132 | background: rgb(229, 226, 226); 133 | } 134 | 135 | #second-child .active{ 136 | background-color: black; 137 | color: white; 138 | 139 | } 140 | 141 | #second-child button:hover{ 142 | background: rgb(216, 213, 213); 143 | } 144 | 145 | #append_data{ 146 | height: 400px; 147 | width: 95%; 148 | } 149 | 150 | #datahere{ 151 | display: flex; 152 | gap: 5px; 153 | } 154 | 155 | #datahere:hover{ 156 | background: rgb(232, 232, 232); 157 | border-radius: 20px; 158 | padding: 5px; 159 | cursor: pointer; 160 | } 161 | 162 | #chnl_image{ 163 | width: 50%; 164 | height: 100%; 165 | } 166 | 167 | #infohere{ 168 | width: 60%; 169 | } 170 | #infohere h4{ 171 | height: 34%; 172 | overflow: hidden; 173 | font-size: 15px; 174 | } 175 | 176 | #infohere p{ 177 | color: gray; 178 | margin-top: 5px; 179 | font-size: 13px; 180 | } 181 | 182 | 183 | #datahere img{ 184 | width: 100%; 185 | border-radius: 10px; 186 | } 187 | 188 | #filtersdiv{ 189 | height: fit-content; 190 | display: flex; 191 | overflow: scroll; 192 | } 193 | #filtersdiv::-webkit-scrollbar{ 194 | width: 0; 195 | } 196 | 197 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | 8 | *:focus{ 9 | outline: none; 10 | } 11 | 12 | body{ 13 | position: relative; 14 | background: #f0f0f0 ; 15 | font-family: "roboto" , sans-serif; 16 | } 17 | 18 | 19 | /* navbar */ 20 | 21 | #navbar{ 22 | position: fixed; 23 | top: 0; 24 | left: 0; 25 | width: 100%; 26 | height: 60px; 27 | background: #fff; 28 | display: flex; 29 | align-items: center; 30 | padding: 0 2.5vw; 31 | } 32 | 33 | /* list icon */ 34 | .toggle-btn{ 35 | width: 20px; 36 | height: 10px; 37 | position: relative; 38 | cursor: pointer; 39 | } 40 | .toggle-btn span{ 41 | position: absolute; 42 | width: 100%; 43 | height: 3px; 44 | top: 50%; 45 | transform: translateY (-50%); 46 | background: #979797; 47 | } 48 | 49 | .toggle-btn span:nth-child(1){ 50 | top: 0; 51 | } 52 | 53 | .toggle-btn span:nth-child(3){ 54 | top: 100%; 55 | } 56 | 57 | 58 | /* youtube icon style */ 59 | 60 | .logo{ 61 | height: 30px; 62 | margin: -10px 30px 0; 63 | } 64 | 65 | /* search box */ 66 | .search-box{ 67 | position: relative; 68 | max-width: 500px; 69 | width: 50%; 70 | height: 35px; 71 | display: flex; 72 | } 73 | 74 | /* input box where the user type */ 75 | .search-bar{ 76 | width: 90%; 77 | height: 100%; 78 | border: 2px solid #dbdbdb; 79 | padding: 0 20px; 80 | font-size: 16px; 81 | text-transform: capitalize; 82 | } 83 | 84 | /* button where user click and content appear */ 85 | .search-btn{ 86 | width: 10%; 87 | height: 100%; 88 | background: #f0f0f0; 89 | border: 2px solid #dbdbdb; 90 | border-left: none; 91 | padding-top: 3PX; 92 | } 93 | .search-btn img{ 94 | width: 50%; 95 | } 96 | 97 | 98 | 99 | /* user option icon div */ 100 | .user-options{ 101 | height: 35px; 102 | display: flex; 103 | margin-left: auto; 104 | align-items: center; 105 | gap: 10px; 106 | } 107 | /* user option icon */ 108 | .user-options .icons{ 109 | height: 80%; 110 | margin-right: 20px; 111 | cursor: pointer; 112 | } 113 | 114 | /* user-dp div */ 115 | .user-dp{ 116 | cursor: pointer; 117 | height: 30px; 118 | width: 30px; 119 | border-radius: 50%; 120 | overflow: hidden; 121 | } 122 | /* user dp image */ 123 | .user-dp img{ 124 | width: 100%; 125 | height: 100%; 126 | object-fit: cover; 127 | } 128 | 129 | /* slide-bar */ 130 | .slide-bar{ 131 | position: fixed; 132 | top: 60px; 133 | left: 0; 134 | min-width: 250px; 135 | width: 250px; 136 | height: calc(100vh - 60px); 137 | background: #fff; 138 | padding-right: 10px; 139 | } 140 | 141 | /* slide-bar links */ 142 | .Links{ 143 | display: block; 144 | width: 100%; 145 | padding: 10px 20px; 146 | display: flex; 147 | align-items: center; 148 | color: #242424; 149 | font-size: 14px; 150 | font-weight: 500; 151 | text-decoration: none; 152 | } 153 | 154 | /* slide-bar links images */ 155 | .Links img{ 156 | height: 25px; 157 | margin-right:20px ; 158 | } 159 | 160 | .Links:hover , .Links.active{ 161 | background: rgba(0, 0, 0, 0.1); 162 | } 163 | 164 | .seperator{ 165 | border: none; 166 | border-bottom: 1px solid rgba(0, 0, 0, 0.4); 167 | margin: 20px 0; 168 | } 169 | 170 | /* filters */ 171 | .filters{ 172 | position: fixed; 173 | left: 250px; 174 | top: 60px; 175 | width: calc(100% - 250px); 176 | height: 70px; 177 | background: #fff; 178 | border-top: 1px solid #dbdbdb; 179 | border-bottom: 1px solid #dbdbdb; 180 | padding: 0 20px; 181 | display: flex; 182 | align-items: center; 183 | overflow-x:auto ; 184 | overflow-y: hidden; 185 | padding-top: 10px; 186 | } 187 | .filters::-webkit-scrollbar{ 188 | width: 0; 189 | } 190 | 191 | 192 | .filter-options{ 193 | flex: 0 0 auto; 194 | padding: 10px 15px; 195 | border-radius: 10px; 196 | background: #f0f0f0; 197 | border: 1px solid #dbdbdb; 198 | margin-right: 10px; 199 | color: #242424; 200 | font-size: 15px; 201 | cursor: pointer; 202 | } 203 | 204 | 205 | .filter-options.active{ 206 | color: #fff; 207 | background:#242424; 208 | } 209 | .filters button:hover{ 210 | background-color: #fff; 211 | color: #242424; 212 | font-weight: 700; 213 | } 214 | 215 | /* video container div */ 216 | .container{ 217 | width: calc(100% - 250px); 218 | margin-top: 120px; 219 | margin-left: 250px; 220 | padding: 20px; 221 | display: grid; 222 | grid-template-columns: repeat(4, 25%); 223 | grid-gap: 20px 10px; 224 | overflow-x: hidden; 225 | } 226 | 227 | .video{ 228 | min-height: 250px; 229 | height: auto; 230 | cursor: pointer; 231 | } 232 | 233 | .thumbnail{ 234 | width: 100%; 235 | height: 170px; 236 | object-fit: cover; 237 | } 238 | 239 | .content{ 240 | width: 100%; 241 | height: 100px; 242 | padding: 10px; 243 | display: flex; 244 | justify-content: space-between; 245 | } 246 | 247 | .channel-icon{ 248 | width: 40px; 249 | height: 40px; 250 | border-radius: 50%; 251 | object-fit: cover; 252 | margin-right: 10px; 253 | } 254 | .title{ 255 | width: 100%; 256 | height: 40px; 257 | overflow: hidden; 258 | } 259 | 260 | .channel-name{ 261 | font-size: 14px; 262 | margin: 2px 0; 263 | color: #979797; 264 | } 265 | -------------------------------------------------------------------------------- /video.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | import nvbr from "./componnents/navbar.js" 7 | document.getElementById("navbar").innerHTML=nvbr() 8 | let child1=document.getElementById("first-child") 9 | 10 | 11 | import filterbtn from "./componnents/filter.js" 12 | document.getElementById("filtersdiv").innerHTML=filterbtn() 13 | 14 | 15 | 16 | 17 | let data= JSON.parse(localStorage.getItem("video_data")) 18 | 19 | console.log(data) 20 | let bag = ""; 21 | let tag = data.snippet.tags; 22 | let g =0; 23 | for(let el of tag){ 24 | if(g<5){ 25 | bag+="#"+el+" " 26 | } 27 | else{ 28 | break 29 | } 30 | g++ 31 | } 32 | 33 | let video_id = data.id.videoId || data.id 34 | 35 | let channel_picture = await channel(data.snippet.channelId) 36 | 37 | 38 | child1.innerHTML=` 39 | 40 | ` 41 | 42 | 43 | let display_data=data.snippet 44 | 45 | 46 | 47 | 48 | let info_container=document.getElementById("container") 49 | 50 | 51 | info_container.innerHTML=` 52 |
${bag}
53 |
${display_data.title}
54 | 55 | 56 |
57 | 58 |
59 | 60 |
61 |

${display_data.channelTitle}

62 |

99.7ksubscribers

63 |
64 |
65 | 66 |
67 | 68 |
69 | 70 |
71 | 72 | 73 | 74 | 75 | 76 |
77 |
78 |
79 | PUBLISH AT : ${data.snippet.publishedAt} 80 |
81 | ${display_data.description} 82 |
83 | ` 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | import jump from "./componnents/redirect.js" 93 | 94 | document.getElementById("searchbtn").addEventListener("click" , jump()) 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | const show= async ()=>{ 104 | 105 | let API_KEYS =["AIzaSyASPLAWmjCPDRoiMtt1AHGQ0TGyRx9wTRU","AIzaSyASPLAWmjCPDRoiMtt1AHGQ0TGyRx9wTRU","AIzaSyBihnXKUmx9h6DHAlTNkrZ-6znzrz3ME1M","AIzaSyA8HVQEsyROLmeZ4P3GhKRCU2BajTnJUNc","AIzaSyAgE8JOY06kJSUxBYYXCGKhQnhx1qD8jdA"] 106 | 107 | let num= Math.floor(Math.random()*2) 108 | 109 | let API_KEY = API_KEYS[num] 110 | 111 | let search = localStorage.getItem("search_term") 112 | 113 | 114 | let data = await fetch(`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&q=${search}&key=${API_KEY}`) 115 | 116 | data = await data.json() 117 | 118 | let actual_data = data.items 119 | 120 | content_show(actual_data) 121 | 122 | } 123 | 124 | 125 | 126 | show() 127 | 128 | 129 | const change =async (el)=>{ 130 | 131 | let value=el.innerHTML 132 | 133 | let data = await fetch(`https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=50&q=${value}&key=AIzaSyCGz_8bE32q4NAkjdAXjpAiigBS6z9ZASU`) 134 | data = await data.json() 135 | 136 | let actual_data = data.items 137 | 138 | content_show(actual_data) 139 | console.log(el) 140 | } 141 | 142 | 143 | 144 | 145 | let arr = document.querySelectorAll("#filtersdiv>button") 146 | 147 | for(let el of arr){ 148 | 149 | el.addEventListener("click",function(){ 150 | change(el) 151 | }) 152 | 153 | 154 | } 155 | 156 | 157 | 158 | 159 | 160 | function content_show(data){ 161 | 162 | let parent = document.querySelector("#append_data") 163 | 164 | document.querySelector("#append_data").innerHTML=null 165 | 166 | for(let el of data){ 167 | 168 | let child = document.createElement("div") 169 | 170 | child.id="datahere" 171 | 172 | child.addEventListener("click",function(){ 173 | store(el) 174 | }) 175 | 176 | 177 | 178 | child.innerHTML = ` 179 |
180 | 181 |
182 | 183 |
184 |

${el.snippet.title}

185 |

${el.snippet.channelTitle}

186 |
` 187 | 188 | parent.append(child) 189 | 190 | } 191 | } 192 | 193 | 194 | const store =(el)=>{ 195 | 196 | localStorage.setItem("video_data",JSON.stringify(el)) 197 | window.location.href="video.html" 198 | 199 | } 200 | 201 | 202 | 203 | const channel= async (channelid)=>{ 204 | 205 | let g= await fetch ( ` https://www.googleapis.com/youtube/v3/channels?part=snippet&id=${channelid}&key=AIzaSyA8HVQEsyROLmeZ4P3GhKRCU2BajTnJUNc` ) 206 | 207 | g = await g.json() 208 | 209 | let url = await g.items[0].snippet.thumbnails.high.url 210 | 211 | return await url 212 | 213 | } 214 | 215 | 216 | 217 | 218 | // ` 219 | 220 | 221 | // let iframe = document.createElement("iframe") 222 | 223 | // iframe.src=`https://www.youtube.com/embed/${video_id}` 224 | // iframe.allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;allowfullscreen" 225 | 226 | // child1.append(iframe) 227 | 228 | 229 | // ` ` 230 | // console.log(video_id) --------------------------------------------------------------------------------