Personal YouTube web player

625 developers have joined this project.

What you will practice

You’ll practice capturing user inputs, integrating with an external API (YouTube), styling, and simple state management. These skills serve as the basis of production apps that integrate third-party APIs with user interaction.

Introduction

You’ll create your own personal simple Youtube browser application that allows you to search for and play videos. See here for the sample version of this project.

Requirements

At the top of application, the user can search for videos by entering a search term and hitting enter / return key.
Search results are shown on the right hand side (up to 5 videos) listed as thumbnails with the video title.
User can click on any of the search results and the video is featured on the left side as a video player with video title and description shown under it.
User can click the play icon on the featured video to play the video.

For an extra challenge

Add a default search term to load videos and show the first video from the result as featured video
Use the YouTube API to show more videos from the same creator under featured video as recommendations.

Suggested Implementation

This project can be implemented as a webpage using any front-end stack (e.g. JavaScript, React, Angular, Vue.js).

References

If implementing via a simple web page
- Refer to Mozilla developer network tutorial on HTML, JavaScript and CSS
- Lean how to call an API using AJAX
If implementing a React app
- Lean to create a boilerplate React app
- Learn about React components and props
- Lean how to style react components with Semantic UI (or use your favorite CSS styling)
- Check out React state management
- Make calls to Youtube API easily using Axios
Lean all about YouTube API - applicable for simple web page or React app
Learn to use iFrame to play YouTube videos

Hit a programming wall?
Get help from our mentors

Post request free
First 15 mins free

Suggested languages and frameworks

HTML/CSS Angular React JavaScript Vue.js

Difficulty

medium

Contributed by

Shashank Katte

Software Developer @ Katte.io with 9+ years of full-stack experience

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

Post request free
First 15 mins free

Shorten your learning curve with on-demand programming help

Other recommended projects

medium

Image search gallery

You’ll create a simple image search application that allows the user to search for images using Unsplash’s image API.

JavaScriptReactHTML/CSSAngularVue.js

medium

Mortgage calculator web app

Taking out loans and calculating monthly EMI can be confusing and stressful. However, with the help of a mortgage calculator, anyone can easily plan their mortgages out. You will build a mortgage calculator in this project!

JavaScriptReactAngularVue.js

easy