Industry guru Dave Taylor answers free tech support questions about a wide variety of business and technical topics, including blogging, Google AdSense, MySpace, Sony PSP, Apple iPod, Mp3 players, management, Linux, SEO, Mac OS X, Facebook, Twitter, LinkedIn and Microsoft Windows.

How can I add a YouTube search to my site?

I'm addicted. First it was America's Funniest Home Videos, now it's YouTube. There are just too darn many hilarious videos on the site. What I really want, though, is to be able to add a YouTube search to my own site so people can easily find all the funny stuff there. Is that doable?


Dave's Answer:

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:

YouTube.com: View Source

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!



Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Simpy.

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

Do you have a way of making the results and movie play in the same window?

Posted by: Please correct the error at April 11, 2008 5:29 PM

The only way of doing this is using frames!

Unless you are good enough at PHP to send a GET request to the page, capture the HTML and echo it back on yours. (Seeing as you asked the question Im assuming you don't).

You should create a new page containing Dave's search, include it on the frame you want within a frame and the searchw ill load in the frame...Remove Daves _blank target though =).

Cheeeers,

Darren

Posted by: darren at April 14, 2008 3:17 AM


Change only [ method="get" ]

to

[method="post" ]

Posted by: Jura at April 23, 2008 3:38 PM

Jura,

That wouldnt work - the method is how you propose the data to the page - it doesnt determine where it will be displayed.

Posted by: Darren at April 24, 2008 5:37 AM

I have a lot to say, but ...
Starbucks coffee cup I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!









Remember personal info?


Please note that I will never send you any unsolicited commercial email. Ever.

While I'm at it, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site.









Search
Find just the answers you seek from among our 1700+ free tech support articles by using our Lijit search engine.


Help!





Subscribe to
Ask Dave Taylor!

Add to Google Reader
Add to My Yahoo!
Subscribe in NewsGator Online

RDF   XML

Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.


Recent Entries
Join the List!
Join my author info mailing list, where you'll learn about my upcoming books, speaking gigs, and more!


Book Links
© 2002 - 2008 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site.

[whiteboard marker tray]