Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vinitshahdeo/mini-youtube

A web app where one can search YouTube videos and sort the videos according to number of likes, comments, views, name and date.
https://github.com/vinitshahdeo/mini-youtube

webapp youtube-api youtube-search-api

Last synced: about 1 month ago
JSON representation

A web app where one can search YouTube videos and sort the videos according to number of likes, comments, views, name and date.

Awesome Lists containing this project

README

        

# Mini YouTube

[![GitHub license](https://img.shields.io/github/license/vinitshahdeo/Mini-YouTube?logo=github)](https://github.com/vinitshahdeo/Mini-YouTube/blob/master/LICENSE) [![GitHub top language](https://img.shields.io/github/languages/top/vinitshahdeo/Mini-YouTube?logo=javascript&color=yellow)](https://github.com/vinitshahdeo/Mini-YouTube/) [![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/vinitshahdeo/Mini-YouTube?logo=git&logoColor=white)](https://github.com/vinitshahdeo/Mini-YouTube/) [![Youtube API](https://img.shields.io/badge/YouTube-API-critical.svg?style=flat&logo=youtube)](https://developers.google.com/youtube/v3/getting-started)

### A web app where one can search YouTube videos in sorted order according to number of likes, comments, views, name and date. It is made using [YouTube API v3](https://developers.google.com/youtube/v3/getting-started).

> ### Are you looking for a React App using YouTube API, please [check this](https://github.com/vinitshahdeo/MiniYouTube/)!


## Instruction

- Get your **YouTube API key [here](https://developers.google.com/youtube/v3/getting-started)**.

- Replace **`API_KEY = XXXXXXXXXX`** in `js/youtube.js` with your own YouTube API key.

```js

const API_KEY = 'XXXXXXXXXXXX'; // REPLACE IT WITH YOUR YOUTUBE API KEY

```

- Open `index.html` with any browser(say chrome, mozilla etc.) Kindly assure the proper internet connectivity before you start browsing videos on **[Mini YouTube](https://github.com/vinitshahdeo/Mini-YouTube/)**.

- Enter your query(*e.g. 'Prank Videos', 'Shreya Ghosal', 'Girls like you' etc.*) to browse videos.

- **Click on `Search` icon.**

- Navigate through the dropdown menu to sort the results.


## Note

- By default, **5 results are returned by [YouTube API](https://developers.google.com/youtube/v3/getting-started)**.
- The retrieved `JSON` Object from YouTube API is displayed in Browser Console.
- The website is responsive. Kindly resize the browser window to see it.


## External Resources

- [Font Awesome](https://fontawesome.com/) - It is used for importing icons in the web app.
- [Google Fonts](https://fonts.google.com/) - `Oxygen` and `Acme` Google fonts are used.
- [JQuery](https://jquery.com/)


## Author

[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/images/0)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/links/0)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/images/1)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/links/1)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/images/2)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/links/2)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/images/3)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/links/3)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/images/4)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/links/4)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/images/5)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/links/5)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/images/6)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/links/6)[![](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/images/7)](https://sourcerer.io/fame/vinitshahdeo/vinitshahdeo/Mini-YouTube/links/7)

**[Vinit Shahdeo](https://www.linkedin.com/in/vinitshahdeo/)**

[![Twitter Badge](https://img.shields.io/twitter/follow/Vinit_Shahdeo.svg?style=social)](https://twitter.com/Vinit_Shahdeo)