Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jennifer Morkunas
20,037 PointsDebugging 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!
Jennifer Morkunas
20,037 PointsThanks! I took another snapshot of the Workspace and updated.
1 Answer
Marcus Parsons
15,719 PointsHey 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>
Jennifer Morkunas
20,037 PointsCool! 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.
Marcus Parsons
15,719 PointsI 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.
Marcus Parsons
15,719 PointsIf you really want to play around with some jQuery plugins, you can find tons through jQuery's site: https://plugins.jquery.com/
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsHey 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.