This is becoming a habit, reverse engineering search engines on popular Web sites! you name the site, from eBay to Google, and I've written about how to add a search box for that particular site on your own website, blog or social network profile page.
The good news is that it's a fun task, at least if you're a bit of an HTML geek like I am, and it's also a chance to dig into a high-powered Web site and see a bit about what they're doing behind the scenes.
The first step with this task is always to go to the site and choose File --> View Source. It opens up and almost always you'll be terrified at how ugly things are. YouTube is, however, rather surprisingly different:
Even with this nicely formatted source, it's still a bit tricky to identify the exact section of HTML that powers the search. Easiest solution is to search for <form, which produces the following:
<form id="search-form" action="/results" method="get" name="searchForm">
<input id="search-term" name="search_query" type="text" onkeyup="goog.i18n.bidi.setDirAttribute(event,this)" value="" maxlength="128" />
<select class="search-type" name="search_type">
<option value="">Videos</option>
<option value="search_users" >Channels</option>
</select>
<input id="search-button" type="submit" value="Search" />
</form>
Truth be told, there's some superfluous material in this search form that makes it pretty on the YouTube page, but is really pretty irrelevant for a simple text search on your own site. Here's that same form with the extras all stripped out:
<form action="/results" method="get">
<input name="search_query" type="text" maxlength="128" />
<select name="search_type">
<option value="">Videos</option>
<option value="search_users">Channels</option>
</select>
<input type="submit" value="Search" />
</form>
Almost there. We need to do one more thing: fix the "action" attribute since it's assuming that you're on the YouTube site but if the code's going to be on your own site, that assumption will be false. Easily done:
<form action="http://www.youtube.com/results" method="get">
Now we're cookin'! To have the results open in a new window (a common request I see for my seach code) we'll add one more attribute to the form tag too:
<form action="http://www.youtube.com/results" method="get" target="_blank">
Now here's the full code:
<form action="http://www.youtube.com/results" method="get" target="_blank">
<input name="search_query" type="text" maxlength="128" />
<select name="search_type">
<option value="">Videos</option>
<option value="search_users">Channels</option>
</select>
<input type="submit" value="Search" />
</form>
and here it is in action:
You can spiff it up further if you'd like, adding tiny YouTube logos as bling or whatever, but that basic code should give you the search you seek for your site, and good luck to you!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
Do you have a way of making the results and movie play in the same window?