Click here to Skip to main content
15,867,568 members
Articles / All Topics

How to Embed Video Search in Web Application

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
23 Aug 2010CPOL1 min read 28.9K   210   4   8
An article on how to embed video search in web application

Introduction

Google has launched Ajax API for different purposes - "video search" is one of them. Many users' get all confused about it many times regarding how to get Google key, how to embed video search in web application. So here I am explaining how to use video search in web application.

Getting Google Search API Key

First, you have to get the Google search API key for this from here.

Visit the above link and fill the information and then use your Gmail account to get the API key.

Note: You can get a gmail account for free. 

The key page will look like this:

api key.JPG

How to Use this Code

Now copy the whole HTML code:

1st.JPG

This is the code for "WebSearch", Video Search and Blog Search but you have to use only the "Video Search". For this, see the next step.

"Video Search"

If you listen to Google Code (presented by Google), you have to take the video search control from there, which is like this...

Just replace the above code with this:

C#
google.load('search', '1');

  function OnLoad() {
  // create a search control

  var searchControl = new google.search.SearchControl();

  // So the results are expanded by default
   options = new google.search.SearcherOptions();

  options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); 

  // Create a video searcher and add it to the control 
  searchControl.addSearcher(new google.search.VideoSearch(), options);

Then the whole code will look like this:

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

   <title>My Google AJAX Search API Application</title>

    <script
    src="http://www.google.com/jsapi?
	key=ABQIAAAABE_5tJYjIxZez706qj8fKhSHXJsp5oogWH5jZodYSc2VMsh-
	GBTebFLwydk8evvTefXYLwNiLYMO_A" type="text/javascript"></script> 

<script language="Javascript" type="text/javascript">

    google.load('search', '1');

function OnLoad() {

 // create a search control
 var searchControl = new google.search.SearchControl();

 // So the results are expanded by default
 options = new google.search.SearcherOptions();

 options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);

 // Create a video searcher and add it to the control
 searchControl.addSearcher(new google.search.VideoSearch(), options);

 // Draw the control onto the page 
 searchControl.draw(document.getElementById("searchcontrol"));

 // Search for a YouTube channel   
   searchControl.execute("ytchannel:NBA");
} 

google.setOnLoadCallback(OnLoad);

 </script>

</head>

<body>

   <div id="searchcontrol">Loading...</div>

 </body>

</html>

The final output will look like this:

video search.JPG

Formatting the Output

If you want to format the output, then you can use the style tag.

Just use this code after closing the </script> tag.

HTML
<style type="text/css"> 
body
      {
            font-family:Arial Rounded MT Bold;
            background-color:Silver;
       }
 #searchcontrol
       {
            background-color:ActiveBorder;
            width:50%;
            margin-left:auto;
            margin-right:auto;
            text-align:left;         
  }  
 <style/>

The output will look like this:

video search style.JPG

NOTE: In my next article, I'll explain all the search techniques of GOOGLE.

Conclusion

We learned how to get the Google Ajax search API key and how to use video search in our web application.

History

  • 23rd August, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Writer Fast-Get
India India
Nikhil is a Microsoft MCTS and MCP.
developed many websites.
interested in web designing and modifying things with
creativity.
-Nikhil

Comments and Discussions

 
GeneralGood work Pin
Md. Marufuzzaman23-Aug-10 3:16
professionalMd. Marufuzzaman23-Aug-10 3:16 
GeneralRe: Good work Pin
NikhilJohari23-Aug-10 21:08
NikhilJohari23-Aug-10 21:08 
GeneralRe: Good work Pin
Md. Marufuzzaman23-Aug-10 21:24
professionalMd. Marufuzzaman23-Aug-10 21:24 
GeneralLooks good.. Pin
Sandeep Mewara23-Aug-10 1:06
mveSandeep Mewara23-Aug-10 1:06 
Just few formatting issue as already reported by others...
GeneralFormatting Pin
Emilio Garavaglia22-Aug-10 20:26
Emilio Garavaglia22-Aug-10 20:26 
GeneralRe: Formatting Pin
NikhilJohari23-Aug-10 21:09
NikhilJohari23-Aug-10 21:09 
GeneralRe: Formatting Pin
Emilio Garavaglia23-Aug-10 21:48
Emilio Garavaglia23-Aug-10 21:48 
GeneralFormating Pin
Not Active22-Aug-10 3:46
mentorNot Active22-Aug-10 3:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.