Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Debugging jQuery plugin

Hi,

I'm trying to use a jQuery plugin with the YouTube API for my project. I've followed the documentation and checked the code for the last hour and I don't know what's going wrong. Here is a snapshot of my workspace

And here is the plugin.

I found the plugin by searching "Youtube" on Unheap. And here it is on Codepen with the example of the top bar removed.

There's some sort of issue I can't figure out. I am trying to get the search results to not display video information along the top bar.

I tried placing the div and id in different places and each time they videos still shows the info instead of being "pretty" like the plugin tries to accomplish. Any troubleshooting genius-sharing would be much appreciated!

Hey Jennifer,

That snapshot doesn't have any files in it. I've had that happen to me a couple times so far. Try making another snapshot of the Workspace if you can and then post it here and/or edit it into your original question.

Thanks! I took another snapshot of the Workspace and updated.

1 Answer

Hey again Jennifer,

Here is the new workspace: https://w.trhou.se/6tvprkwefl

I found a solution without having to use the PrettyEmbed dependency. Youtube's API allows for you to set parameters when you call the video from their server. So, to make it match the pretty demo version, I set "showinfo" to 0 and "controls" to 0, by sending those parameters through the URL in the "item.html" page. You can add any other parameters you'd like in the URL before retrieving data from the server. I also changed the height of the iframe to "320" so that the black bars won't show up.

For the list of parameters you can use with the player, check this page out: https://developers.google.com/youtube/player_parameters

Here is the new iframe inside "item.html". The only things I changed here were the source where I appended the parameters to the URL and the height.

<iframe class="video w100" width="640" height="320" src="//www.youtube.com/embed/{{videoid}}?showinfo=0&controls=0" frameborder="0" allowfullscreen></iframe>

Cool! Thanks! That is a lot easier than adding the plugin, but I wanted to practice with jQuery plugins. For learning purposing, do you know why that plugin wouldn't work? That would really help me understand and debug in the future. Thanks again.

I know what you mean, but if you can avoid using dependencies, it's just much more efficient because you don't have to load an entire extra library of things to do just a couple easy things, if that makes sense. I've never worked with that library before, and so, I just decided to do it the easiest, most efficient way. The PrettyEmbed library could definitely work for you, I'm sure, but you'd be loading an entire library of content that is based on another library of content: jQuery. You're actually loading a few JavaScript libraries that are unnecessary. You could eliminate the use of tlp, jQuery, and PrettyEmbed by just doing the project in pure JavaScript and have a much faster product at the end.

If you really want to play around with some jQuery plugins, you can find tons through jQuery's site: https://plugins.jquery.com/