YouTube API, Dribbble Shots, and Road Trips

Dave Olson
Aug 28, 2017 · 4 min read

So, I missed my second…er…third week. I’m trying to make up for it now though by making this post extra good.

I’ll be pulling from some work I did with the two different YouTube API’s, my first ever dribbble shot, and a long, long road trip my wife and I took last Thursday.

YouTube

One of the projects I’m working on right now involves getting some YouTube videos to be embedded on both an overall videos page and specific playlists on category pages. Seems like it should be pretty straight forward to naive young Dave. Surprisingly, I was correct (well, mostly).

To start, I had only ever used the YouTube JavaScript iFrame API. It’s easy to use and the documentation is well written. I’d used it before in a past life on this page. Ask me about the A/B testing on that one sometime.

Anyways, I love using Google API’s. The Maps API has always seemed great to me as well. However, I needed to make use of the Data API. You can do this asynchronously with JavaScript, but since this was a WordPress site and I was already working in PHP, I decided to do a good old fashioned curl.

First, we initialize the curl and pass in the URL we need for YouTube. To get all of the User’s videos, I first determined the channel id for the user. Then, we use the Search route to get all videos associated with that channel. I passed a few other parameters to make the request like I wanted it.

Here is is what the whole thing looked like:

Make sure to remember your key.

I then used those results to build the HTML structure. I listed them out, wrapping them with classes that lined up with listeners in my JavaScript. Whenever one of these was clicked, the function pulled the hash from the href attribute and used that to load in a video by ID.

Next, I used the YouTube iFrame API to grab the first video of the list and put it in a large player area. I follow a pretty standard initialization. I almost always do it the way the docs outline of doing it. Load the API asynchronously and get the your video when the API is ready. Using PHP I passed the video ID of my first result of the earlier curl into the videoID parameter of the iFrame API call.

At the end, I use FitVids to make the video fill the container.

This made it easy to add the function to my JavaScript file that switched out the video in this player when you clicked one of the other videos in the list.

Dribbble Shots

Last week I took my first Dribbble shot. Tyler Lacross invited me several months ago, but I had yet to post anything. So, last weekend, I set up camp on my wife’s laptop at Bloom in Old Town, Lansing, MI. I was working on a freelance site and was quite happy with how it was turning out. I decided to put that out there in efforts of getting more involved, and I got some good response. A few followers, some likes, it was great.

So, check it out here: Dave’s First Dribbble Shot

Roadtrip

Well, now we are far enough out that I hardly remember what I was planning on writing for this. Whatever the reason, my wife Rebecca and I took a drive from Charleston, SC to Lansing, MI for a wedding we were both involved in. We rolled out of town late (stuck at work, flat tire on the bike on my way home), made it to Charlotte around 9:30 to drop the dog off, and set out again to drive through the night. I asked Becca to take over somewhere in South East Ohio and promptly fell asleep in the passenger seat.

I woke up about 2 hours later in a Starbucks parking lot, sore, thirsty, and very confused. Becca was asleep next to me. The sun was just starting to rise. I shuffled into the Starbucks while Becca switched back to the passenger seat and we continued on.

The problem here was that in an effort to save time driving, we ended up spending more time on the road. I overcame this with an early on the road time for our trip back, putting us in Charlotte to get our pup before the sun set.

Like I said, thinking about this one as a problem solved is a bit of a stretch. Oh well.

Tune back next week for more! I’ve got an interesting JavaScript snapshot to talk at you about.

)
Dave Olson

Written by

Designer, web developer, husband to a hot wife, beer drinker, coffee enthusiast, fixie rider, dog parent, pixel pusher.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade