How I navigated the Youtube API
Understanding how APIs work can be pretty tough, especially if you’re new to the realm of web development. Like what is an API and what does it have to do with youtube?
For My first coding project I was originally hesitant to navigate into the world of APIs because I wanted to stick to my comfort zone: Front end framework. But having so much experience with HTML and CSS (basically learned it on my own in high school, before youtube tutorials was even a thing). I learned a new CSS Framework, implemented it on the page, coded out the HTML and was done in just a little over a day.
My team members at this point were still trying to figure out how to include Server Side APIs, so I decided to step out of my comfort zone and figure out how to add YouTubes Search functionality on our application.
For this bit of the project these essential skills were necessary:
1. Semantic HTML
2. Understanding how to call, manipulate and append to DOM elements on the page
3. Good foundational knowledge of Javascript
4. Being able to fetch and parse through data in JSON format.
These were the steps I took:
1. Created a form with an Input field and submit button with specific ID attributes so that I can pull information from and add a function to once the submit button is pressed
2. Created Variable in the javascript that pointed to these DOM elements in the Javascript
3. Went Signed up to get an API key from google’s Youtube search API.
once I got the API key, I created a variable with it on the javascript
4. Since the youtube API call needs a few parameters, the search query, the API Key, and the max results. I set the search query to the value of what the user inputted into the search on the page. The API key is already stored in a variable so the only thing I had left to do here was set a variable for max results which I set to 10
5. Now comes the meat of the code, creating a function that will fetch and return back the requested youtube data. I created a function that will run when the submit button is pressed.
6. In this function concatenate the API key, the max results, and the search query into the fetch URL. Then return 2 promises. The fetch will return the data points to us in an an object so we need to create a function within this function to parse through the object and pull the information we need to add these videos onto our page.
7. To do this parsing of the information I created a for loop that will go through each data item, retrieve the video ID, and create a separate Iframe for each video returned to be appended onto the page. I used dot notation to access the array items in the object that was returned to us.
8. Once the function has gotten the videoIDs for the videos, I used document.createElement to create the iframes needed to display the videos. then I used setAttribute to set the size of the video and the SRC URL of the video
9. I used appendChild to add the elements onto the page in the music videos section of our page.
10. This is the end result:
