A YouTube Search Box (HTML form)

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • steponfrog
    Member
    • Mar 2006
    • 62
    • 3.6.x

    [Any Version] A YouTube Search Box (HTML form)

    Hi,

    This is my first Tip submission (not sure if it should go here)...

    I have wanted a YouTube search box on my board for a while now, but if you search your YouTube account for such code, or buttons, etc., (not the searching for buttons in the YouTube searchbox; that would result in some odd things, I'm sure) you will be redirected to the Google API documents that tell you all sorts of wonderful things, but nothing simple as the HTML form code for a YouTube seachbox...

    I believe I can help, somewhat...

    I've stuck this HTML code into my ad_header_logo template, so that the search box is on the top-right of my board, but you can stick it where you like...

    Nothing needs to be edited, unless you want to reformat the classes or syles, in which case, an explaination of the YouTube searchbox FORM follows this entire code....

    The following code uses the [How To] Create Your Own vBulletin Tables by [Norman]... Thanks to Norman and his vB3.7 QuickTip
    HTML Code:
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
     <tr>
      <td class="thead" width="100%">
       <div style="text-align: center;">
        <strong>YouTube Search</strong>
       </div>
      </td>
     </tr>
     <tr>
      <td class="alt1" width="100%">
      <div class="smallfont" style="text-align: center;">
       <form id="vb_yt_search-form" action="http://www.youtube.com/results" method="get" target="_blank">
        <input id="vb_yt_search-term" 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>
      </div>
      </td>
     </tr>
    </table>
    The form code is wrapped in a TABLE tag, in order that you may wish to add other search-type boxes, or other stuff in a nice little table, and so that the search box may be neatly presented. However, you may just wish to do your own thing with your new YouTube search box code:

    YouTube searchbox HTML code without TABLE entity:
    HTML Code:
    <form id="vb_yt_search-form" action="http://www.youtube.com/results" method="get" target="_blank">
    <input id="vb_yt_search-term" name="search_query" type="text" maxlength="128" />
    <select id="vb_yt_searcg-type" name="search_type">
    <option value="">Videos</option>
    <option value="search_users">Channels</option>
    </select>
    <input type="submit" value="Search" />
    </form>
    ------------------------------------------------------
    YouTube SearchBox HTML FORM code explained...

    (In following code, where RED text appears, it may be changed to your own suiting)
    This YouTube seachbox FORM code is explained as such:
    Please note, the the ID entities used in the following HTML tags are not specific to the YouTube search function, and so the values may be changed to whatever you wish. However, if you do change the value of the ID tags, you may want to keep the values simple so that they are understandable and follow some sort of standard; I've used vb_yt_ as a standard.
    Code:
    <form id="[COLOR=red]vb_yt_search-form[/COLOR]" action="http://www.youtube.com/results" method="get" [COLOR=red]target="_blank"[/COLOR]>
    ^^ Important parts of the FORM tag are the ACTION that sends your form data to YouTube and the METHOD as GET for YouTube standard.

    Code:
    <input id="[COLOR=red]vb_yt_search-term[/COLOR]" name="search_query" type="text" maxlength="128" />
    ^^ Important parts of the first INPUT tag are the NAME of the input field, which is sent to YouTube at the end of the web address,
    eg. http://www.youtube.com/results?search_query=vbulletin. The TYPE needs to remain as TEXT, and the maxlength needs to remain as 128 characters.

    Code:
    <select id="[COLOR=red]vb_yt_searcg-type[/COLOR]" name="search_type">
    ^^ Important part is the NAME entity, as this is sent to YouTube at the end of the web address,
    eg. http://www.youtube.com/results?search_query=vbulletin&search_type=
    (please note... on the YouTube website, the searchbox at the top of the page has a dropdown containing two items [Videos] and [Channels], the result of choosing VIDEOS presents you with a list of VIDEOS, whereas choosing Channels results with a list of YouTube members. However, search for Videos, you leave the SEARCH_TYPE as blank; this will become clear after reading the OPTION entities, as follows...)

    Code:
    <option value="">[COLOR=red]Videos[/COLOR]</option>
    <option value="search_users">[COLOR=red]Channels[/COLOR]</option>
    ^^ Important parts in the first OPTION tag is the VALUE entity, that it is a blank value. This is the standard type of search for YouTube, and so no value is given for Videos, and is why the final part of this hyperlink is blank
    - http://www.youtube.com/results?search_query=vbulletin&search_type= - 'SEARCH_TYPE=' -- is the OPTION tag VALUE entity "".

    ^^ Important parts in the second OPTION tag is the VALUE entity, that it holds the value SEARCH_USERS, and it is this option that results in the following hyperlink example...
    http://www.youtube.com/results?search_query=vbulletin&search_type=search_users - 'SEARCH_TYPE=SEARCH_USERS', whereas to search Videos the 'SEARCH_TYPE= is correct.

    ^^ In both OPTION tags, the RED text is what shows in the dropdown selection list, and may be changed to suit your own needs.

    Code:
    <input type="submit" value="[COLOR=red]Search[/COLOR]" />
    ^^ This is the final part of the YouTube searchbox FORM, and, as you can see, it is the SUBMIT button; the button that sends all the search data to YouTube. The VALUE of this INPUT tag may be changed to suit your needs, so that a different text is shown on the submit button, instead of the standard Search (eg, you could have 'Go Find Stuff', or 'What Is Out There...').

    I hope this is helps other vBulletin users...
    Last edited by steponfrog; Wed 16 Jul '08, 8:56pm. Reason: hyperlink examples were split; important that they're not!
    _______________________________________________________________

    Got Shadows, Ghosts, Numb3rs, Angels, or Phenomenon?
    You're not the only one.!
widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
Working...