Floris
17th July 2008, 10:01 PM
Tip of the day : [Any Version] A YouTube Search Box (HTML form)
Original thread (http://www.vbulletin.com/forum/showthread.php?t=278986&goto=newpost) posted on vBulletin.com by : steponfrog on : 17th July 2008 06:53 AM
[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 (http://www.vbulletin.com/forum/showthread.php?t=230929) by [Norman] (http://www.vbulletin.com/forum/member.php?u=146037)... Thanks to Norman and his vB3.7 QuickTip (http://www.vbulletin.com/forum/forumdisplay.php?f=120)
HTML Code:
YouTube Search
Videos
Channels
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:
Videos
Channels
------------------------------------------------------
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:
^^ 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:
^^ 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 (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:
^^ 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= (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:
Videos
Channels
^^ 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= (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 (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:
^^ 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... :o
vBulletin-Fans.com hopes you learned something from this great tip and if you also have a great tip you can submit it on vBulletin-Tutorials.com here (http://www.vbulletin-tutorials.com/newthread.php?do=newthread&f=591), or on vBulletin.com here (http://www.vbulletin.com/forum/forumdisplay.php?f=109). Don't forget to subscribe to this forum (http://www.vbulletin-tutorials.com/subscription.php?do=addsubscription&f=591) to get daily tips on how to best secure, optimize, manage and operate your vBulletin powered forum.
Floris & Staff
vBulletin Fans Network
http://www.vBulletin-Tutorials.com/
Original thread (http://www.vbulletin.com/forum/showthread.php?t=278986&goto=newpost) posted on vBulletin.com by : steponfrog on : 17th July 2008 06:53 AM
[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 (http://www.vbulletin.com/forum/showthread.php?t=230929) by [Norman] (http://www.vbulletin.com/forum/member.php?u=146037)... Thanks to Norman and his vB3.7 QuickTip (http://www.vbulletin.com/forum/forumdisplay.php?f=120)
HTML Code:
YouTube Search
Videos
Channels
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:
Videos
Channels
------------------------------------------------------
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:
^^ 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:
^^ 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 (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:
^^ 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= (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:
Videos
Channels
^^ 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= (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 (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:
^^ 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... :o
vBulletin-Fans.com hopes you learned something from this great tip and if you also have a great tip you can submit it on vBulletin-Tutorials.com here (http://www.vbulletin-tutorials.com/newthread.php?do=newthread&f=591), or on vBulletin.com here (http://www.vbulletin.com/forum/forumdisplay.php?f=109). Don't forget to subscribe to this forum (http://www.vbulletin-tutorials.com/subscription.php?do=addsubscription&f=591) to get daily tips on how to best secure, optimize, manage and operate your vBulletin powered forum.
Floris & Staff
vBulletin Fans Network
http://www.vBulletin-Tutorials.com/