|
|
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? 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!
More Useful HTML, JavaScript and Web Site Programming Articles:
✔ How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....
✔ Can I embed a Facebook search box on my blog site?I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...
✔ Can I use CSS for drop shadows on my blog?I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....
✔ How can I embed interactive photo panoramas on my site/blog?I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...
✔ How can I create a Twitter search URL shortcut?I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...
Let's stay in touch!
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!
Categorized:
HTML, JavaScript and Web Site Programming
(Article 7919,
Written by Dave Taylor)
Tagged: google video, reverse engineering, search engines, youtube Previous: How to make an Apple Mighty Mouse a two-button mouse? Next: Can hackers read everything on my computer? Reader Comments To Date: 21darren said, on April 14, 2008 3:17 AM:
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 Jura said, on April 23, 2008 3:38 PM:
to [method="post" ] Darren said, on April 24, 2008 5:37 AM:
Jura, That wouldnt work - the method is how you propose the data to the page - it doesnt determine where it will be displayed. Ullas said, on June 12, 2008 4:26 PM:
Exclent work ... cybill said, on November 25, 2008 4:35 PM:
is there anyway to preload the search with a word?? Ollie Barnett said, on December 29, 2008 12:19 PM:
Yeah to preload the search with a word just use the tag value="yourword" in the <input name="search_query" type="text" maxlength="128" /> Im interested in hearing about displaying the results on my site using PHP if anyone can send me in the right direction to do that? I'm new to PHP but have a good grasp of it. Ollie Barnett said, on December 29, 2008 12:24 PM:
It seems that my code has been extracted to prevent injection! Nice! What you want to do is put the command value="your word" in the same tag that begins with input name. It should go at the end of this tag just before the tag closes repacing "yourword" with the word you want to use and leaving it in inverted commas. Though if you want to do this you can get a widget from Google which will search only specific videos you want or display a list of your chosen videos etc. Google youtube widgets. mosho said, on February 5, 2009 3:23 AM:
can you help on that tiny thing ? when i search in hebrew it gives question mark ?? results from my site. somehow from here it gives correct results. why is that? i have just copyied and paste to my html page and it gives ??? results. alveez said, on September 11, 2009 1:56 AM:
hello, thank you shah said, on June 7, 2010 7:05 AM:
HOW CAN I ADD A YOUTUBE SEARCH TO MY SITE? Rajshekar said, on August 10, 2010 8:51 AM:
How can i search video's with highest ratings khawer Khan said, on September 21, 2010 12:32 PM:
How Can I Submit my games blog to you tube tigerdavinder said, on September 23, 2010 11:23 PM:
please add a search box in my website me said, on October 14, 2010 1:40 AM:
How do i add a facebook search bar to a website? sanaan said, on October 19, 2010 2:01 AM:
Kindly tell me how i will load search videos in div paul said, on January 15, 2011 10:51 AM:
Hi Dave - LOVING this little script / form . Been all over looking for a way to search, but just within the videos in my yt channel. I've looked at widgets, the google video search api and the yt data api. spent hours on it. Is there a super quick and easy way to modify the above so it just searches for videos within my channel pls? Not, the whole of yt? Many Thanks, Paul. benjie said, on August 5, 2011 11:55 PM:
can you help build a business directory search box tool for my directory site, I am looking to have a category and location search box for my site. Thanks and God Bless! PJ said, on October 30, 2011 8:05 PM:
@Paul Yeah, I do believe that is possible. parasuram said, on December 23, 2012 8:27 PM:
Remove target="_blank" chras said, on May 9, 2013 7:59 PM:
anyone ever figure out how to get the results to display within your own website on a new "Results Page"?
I do have a comment, now that you mention it!Check This Out Too... |
Recent Entries
Look for Answers
Recommended
All Our Categories
Apple iPad Help
Articles and Reviews Auctions and Online Shopping Blogs and Blogging Building Web Site Traffic Business and Management Computer and Internet Basics d) None of the Above Facebook Help Google Gmail Help Google Plus Help HTML, JavaScript and Web Site Programming Industry News and Trade Shows iPhone and Cell Phone Help iPod, Sony PSP and MP3 Player Help Kindle Fire Help Mac OS X Help Pay Per Click (PPC) Advertising Pinterest Help Search Engine Optimization (SEO) Shell Script Programming Tech Support Video Help The Writing Business Twitter, LinkedIn and Social Network Help Unix and Linux Help Video Game Tips and Help Windows PC Help Find Me on Google+ ADT on G+ |
Do you have a way of making the results and movie play in the same window?