{"id":20418040,"url":"https://github.com/chandan-mourya/youtubeclone","last_synced_at":"2026-04-11T05:33:17.379Z","repository":{"id":48169235,"uuid":"516656080","full_name":"Chandan-Mourya/YouTubeClone","owner":"Chandan-Mourya","description":"Chandan Mourya-YouTube-Clone Building a clone of famous websites like YouTube.com is really challenging and a good exercise for aspiring front-end developers. Here the challenge is to build out this landing page and get it looking as close to the design as possible.","archived":false,"fork":false,"pushed_at":"2022-07-23T04:02:39.000Z","size":5870,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-10T20:42:10.019Z","etag":null,"topics":["bootstrap","css","html","java","javascript","youtube"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chandan-Mourya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-22T07:37:45.000Z","updated_at":"2025-06-04T16:58:24.000Z","dependencies_parsed_at":"2022-08-28T05:41:18.508Z","dependency_job_id":null,"html_url":"https://github.com/Chandan-Mourya/YouTubeClone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Chandan-Mourya/YouTubeClone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chandan-Mourya%2FYouTubeClone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chandan-Mourya%2FYouTubeClone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chandan-Mourya%2FYouTubeClone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chandan-Mourya%2FYouTubeClone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chandan-Mourya","download_url":"https://codeload.github.com/Chandan-Mourya/YouTubeClone/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chandan-Mourya%2FYouTubeClone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279005275,"owners_count":26083864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","html","java","javascript","youtube"],"created_at":"2024-11-15T06:29:12.511Z","updated_at":"2025-10-10T20:42:11.567Z","avatar_url":"https://github.com/Chandan-Mourya.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# YouTubeClone(https://chandan-mourya-youtubeclone.netlify.app/)\n\nYouTube Clone using HTML, CSS, and Javascript\n![image](https://user-images.githubusercontent.com/43124877/180589721-8adc05e8-7cde-4c9e-860d-178e331dbf74.png)\n\nChandan Mourya-YouTube-Clone\nBuilding a clone of famous websites like YouTube.com is really challenging and a good exercise for aspiring front-end developers. Here the challenge is to build out this landing page and get it looking as close to the design as possible.\n\nThis challenge focuses mostly on HTML, CSS and JS part\n\nFolder Structure of the project\n\nindex.html — contains the HTML layout which defines the element structure that would be shown on the page.\nimage folder — contains images used in our project.\nstyle.css — contains CSS code for styling. Using CSS we can style the different portions to make them more visually appealing.\nscript.js — contains Javascript code.\n![Screenshot (1156)](https://user-images.githubusercontent.com/43124877/180589736-12bc745a-0cbc-4a78-bdfc-93f88307324d.png)\n\nHTML Layout\nOpen VSCode and create the basic HTML structure in an index.html file by ! and then pressing tab. Give the title as ‘YouTube’. Link style.css and script.js to the created HTML file.\n\n\nindex.tml\nCSS Styling\nQuite a bit of CSS coding is required and I explained only the important parts here the rest of the CSS code mostly deals with positioning, size, and color of the elements. I shared the GitHub link at the end of the post where you can see the complete code.\n\n\nStyle.css\nJavascript logic\nWe have used Youtube API\nWith the YouTube Data API, you can add a variety of YouTube features to your application. Use the API to upload videos, manage playlists and subscriptions, update channel settings, and more.\nUse the API to search for videos that match specific search terms, topics, locations, publication dates, and more. The APIs search. list method also supports searches for playlists and channels.\n\n\nYouTube API\n![Screenshot (1154)](https://user-images.githubusercontent.com/43124877/180589742-4a1f0fa8-98ad-4d2a-9070-e9e46713785f.png)\n\nBefore you start\nYou need a Google Account to access the Google API Console, request an API key, and register your application.\n\nCreate a project in the Google Developers Console and obtain authorization credentials so your application can submit API requests.\n\nAfter creating your project, make sure the YouTube Data API is one of the services that your application is registered to use:\n\nGo to the API Console and select the project that you just registered.\nVisit the Enabled APIs page. In the list of APIs, make sure the status is ON for the YouTube Data API v3.\nIf your application will use any API methods that require user authorization, read the authentication guide to learn how to implement OAuth 2.0 authorization.\n\nSelect a client library to simplify your API implementation.\n\nFamiliarize yourself with the core concepts of the JSON (JavaScript Object Notation) data format. JSON is a common, language-independent data format that provides a simple text representation of arbitrary data structures. For more information, see json.org.\n\nFinal Result of our Website:- Search Any movie\n\n\nGithub:- https://github.com/Chandan-Mourya/YouTubeClone\n\nThank You.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchandan-mourya%2Fyoutubeclone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchandan-mourya%2Fyoutubeclone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchandan-mourya%2Fyoutubeclone/lists"}