November 16, 2016 9:52 am

Create YouTube Video Search Engine with jQuery

This code snippet I found on codepen and found it interesting so sharing it with my readers, It’s a simple jQuery script help you to search videos on YouTube you can search any video on YouTube publicly available. It’s a very simple and easy to configure jQuery snippet let’s make YouTube search engine site with jQuery.

Create YouTube Video Search Engine with jQuery

First of all you need to create Google Project to get API Key.

Click here to create project.

Create jQuery YouTube Video Search Engine google api library

create-project-google

Select Project.

select-project-test-phpgang

Search YouTube data API Service and enable it.

search-youtube enable-youtube-data-api data-api-enabled

Now Generate API Key.

google-api-credentials-test-phpgang api-key-final-test-phpgang

Finaly we got API Key now move to Coding.

Include some files like jQuery, Bootstrap, FancyBox and some scripts.

HTML Search Form:

Above HTML show search form and results and buttons div.

Now Add JavaScript Main code: ADD_YOUR_API_KEY_HERE replace your API Key with this.

Above JavaScript do all works Request API’s and fetch data from YouTube ADD_YOUR_API_KEY_HERE replace your API Key.

searchYoutube() This function search all videos for given key

nextPage() Show next page of current result

prevPage() Show previous page of current result

getOutput(item) this function generate output data on given values.

getButtons(prevPageToken, nextPageToken) create buttons next and previous

Some CSS styles to make output looks good:

This CSS will add some beautification to results and search form.

That’s all.

I hope you like this tutorial plese share your feedback in comments and if you face any issue please comment below.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:
  • Collins Tagoe

    he may God richly bless you are doing a good job

  • Krishna Karki

    Thank you for the wonderful article. Does google charges $$ for using youtube search api?

  • hello huzoor
    A little very nice that will be very useful for search for life with jquery. Thanks for sharing this tip.

  • Mustafa Öztürk

    I can not download, i can not subscribed

  • Max John

    I have subscribed years back but when i want to download now it says Sorry no email found subscribe below.

  • Demo not working, only loading but no result coming

  • the code doesn’t do anything and also cant subscribe, tried another one of your articles yet same thing nothing works 🙁

  • Faisal Zamir

    Hi!
    Very great article to learn in right way,
    Thanks to post like this one.