Youtube Video Search and Player in Lightning Web Component
Around 4 years ago I have written a blog on Youtube Player using Lightning(Aura) Component. This component also allows the user to share videos directly on the chatter as well.
I believe if there is something in the Aura Component then it should be in the LWC as well. 🙂
Here I come with a Youtube Player in Lightning Web Component. Search directly in the app and share on the chatter as well.
Few of the cool things about this component:
1. Listen or watch videos with navigating to the tabs.
2. Maximize the youtube screen.
3. Easy to share the video link on the chatter.
4. Play video and close the utility. You are still able to hear the audio. It can be your next music player.
Here is the demo of the app:
A. Let’s start building the Youtube Player. First, we need an API key from Google.
1. Go to https://console.developers.google.com
2. Create a new project here by clicking on the Create Project.
3. A screen will open, fill all project’s info here, Then click on Create button.
4. Navigate to your created project.
5. Now click on the + Enable APIs and Services button.
6. Here search for Youtube data API v3 and select YouTube Data API v3.
7. Now enable YouTube Data API v3 clicking on the Enable button.
8. Click on Create Credentials button. Fill out the information in the form. You need to select YouTube Data API v3. After these steps, you will get an API key. Use this key in the YouTubeController.cls after getting the code.
B. Deploy into Scratch Org using VS Code and SFDX
1. Clone this repository from Github https://github.com/TheVishnuKumar/youtube-to-chatter-lightning-web-component.
2. Authorize a dev hub org and create a new scratch org.
3. Now push this code to scratch org.
C. Deploy Directly from Github to Salesforce Org:
1. Go to https://github.com/TheVishnuKumar/youtube-to-chatter-lightning-web-component
2. Here click on Deploy to Salesforce.
3. You will be asked for org type and username/password. Provide the information and follow the steps to deploy.
Note: Don’t forget to add API ket inYouTubeController class.
D. Run the Youtube Player
1. Go to Sales (Lighting) app.
2. You will see Youtube Player in the Utility bar.
Let’s start listening or watching your favorite youtube videos while working.
Happy Learning!!!