PLEASE HELP: YouTube Horizontal Video Bar Featuring 6 Videos

35 views
Skip to first unread message

Lucy Paolucci

unread,
Dec 10, 2009, 12:58:00 PM12/10/09
to Google AJAX APIs
I have created a horizontal bar for my website but it only features 4
videos in the bar, is it possible to edit the code to feature 6 videos
instead of 4? Thank You!

Jeremy Geerdes

unread,
Dec 10, 2009, 1:32:55 PM12/10/09
to google-ajax...@googlegroups.com
Yes, but you're going to have to go in and manually edit the JS to do
it because the API only returns results in sets of 4 or 8. So to get
6, you'll have to request the large resultset, but then stop the loop
which processes the results at 6.

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
http://jgeerdes.home.mchsi.com
http://jgeerdes.blogspot.com
http://jgeerdes.wordpress.com
jgee...@mchsi.com

Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.

If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!

And check out my blog, Adventures in Web Development, at http://jgeerdes.blogspot.com
!
> --
>
> You received this message because you are subscribed to the Google
> Groups "Google AJAX APIs" group.
> To post to this group, send email to google-ajax...@googlegroups.com
> .
> To unsubscribe from this group, send email to google-ajax-searc...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/google-ajax-search-api?hl=en
> .
>
>

Lucy Paolucci

unread,
Dec 10, 2009, 1:40:42 PM12/10/09
to Google AJAX APIs
Thank You So Much For The Quick Reply, But How Do That? Also I would
like to add a scroll for the bar. Here Is My Current Code:

<div id="videoBar-bar">
<span style="color:#676767;font-size:11px;margin:10px;padding:
4px;">Loading...</span>
</div>

<!-- Ajax Search Api and Stylesheet
// Note: If you are already using the AJAX Search API, then do not
include it
// or its stylesheet again
-->
<script src="http://www.google.com/uds/api?
file=uds.js&v=1.0&source=uds-vbw"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>

<!-- Video Bar Code and Stylesheet -->
<script type="text/javascript">
window._uds_vbw_donotrepair = true;
</script>
<script src="http://www.google.com/uds/solutions/videobar/
gsvideobar.js?mode=new"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/videobar/
gsvideobar.css");
</style>

<style type="text/css">
.playerInnerBox_gsvb .player_gsvb {
width : 320px;
height : 240px;
}
</style>
<script type="text/javascript">
function LoadVideoBar() {

var videoBar;
var options = {
largeResultSet : !true,
horizontal : true,
autoExecuteList : {
cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
executeList : ["ytchannel:TheDirtyMartinisite"]
}
}

videoBar = new GSvideoBar(document.getElementById("videoBar-bar"),
GSvideoBar.PLAYER_ROOT_FLOATING,
options);
}
// arrange for this function to be called during body.onload
// event processing
GSearch.setOnLoadCallback(LoadVideoBar);

</script>


On Dec 10, 1:32 pm, Jeremy Geerdes <jrgeer...@gmail.com> wrote:
> Yes, but you're going to have to go in and manually edit the JS to do  
> it because the API only returns results in sets of 4 or 8. So to get  
> 6, you'll have to request the large resultset, but then stop the loop  
> which processes the results at 6.
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>
> For more information or a project quote:http://jgeerdes.home.mchsi.comhttp://jgeerdes.blogspot.comhttp://jgeerdes.wordpress.com
> jgeer...@mchsi.com
>
> Unless otherwise noted, any price quotes contained within this  
> communication are given in US dollars.
>
> If you're in the Des Moines, IA, area, check out Debra Heights  
> Wesleyan Church!
>
> And check out my blog, Adventures in Web Development, athttp://jgeerdes.blogspot.com
>   !
>
> On Dec 10, 2009, at 11:58 AM, Lucy Paolucci wrote:
>
>
>
> > I have created a horizontal bar for my website but it only features 4
> > videos in the bar, is it possible to edit the code to feature 6 videos
> > instead of 4?  Thank You!
>
> > --
>
> > You received this message because you are subscribed to the Google  
> > Groups "Google AJAX APIs" group.
> > To post to this group, send email to google-ajax...@googlegroups.com
> > .
> > To unsubscribe from this group, send email to google-ajax-searc...@googlegroups.com
> > .
> > For more options, visit this group athttp://groups.google.com/group/google-ajax-search-api?hl=en
> > .- Hide quoted text -
>
> - Show quoted text -
Message has been deleted

Jeremy Geerdes

unread,
Dec 11, 2009, 4:36:27 PM12/11/09
to google-ajax...@googlegroups.com
Please follow these steps to accomplish what you're trying to do.

Locate the line in your existing code ready "largeResultSet : !true,"
and change it this: largeResultSet : true,

2. Download and save http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new
. Open it in a text editor (e.g., Notepad, TextEdit, etc.)

3. In gsvideobar.js, locate the line that reads
"GSvideoBar.prototype.searchComplete = function(fromListItem) {". A
few lines below this, there is a line reading "for (var i = 0; i <
this.vs.results.length; i++) {". Change this second line to this: for
(var i = 0; i < this.vs.results.length && i < 6; i++) {

4. Save your copy of gsvideobar.js, upload it to your site.

5. Adjust the line in your previous code reading <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new
" type="text/javascript"></script> so that the src attribute points to
your copy of gsvideobar.js instead of Google's.

All of this said, in the future, please refrain from posting the same
thing multiple times on the group. Sometimes it takes a little time to
get an answer, especially when your request is for detailed
instructions about how to do something. Further, posting the same
thing multiple times could ultimately result in you getting banned for
spamming the group.

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.

If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!

And check out my blog, Adventures in Web Development, at http://jgeerdes.blogspot.com
!

Lucy Paolucci

unread,
Dec 11, 2009, 5:32:24 PM12/11/09
to Google AJAX APIs
Thank You So Much. I apologize for breaking the group posting rules,
but now that I am aware of the violation, I promise to honor the rules
in future communications. Should I post any problems or questions in
this thread? Thank you again. Have a great weekend.

Lucy Paolucci

On Dec 11, 4:36 pm, Jeremy Geerdes <jrgeer...@gmail.com> wrote:
> Please follow these steps to accomplish what you're trying to do.
>
> Locate the line in your existing code ready "largeResultSet : !true,"  
> and change it this: largeResultSet : true,
>
> 2. Download and savehttp://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new
>   . Open it in a text editor (e.g., Notepad, TextEdit, etc.)
>
> 3. In gsvideobar.js, locate the line that reads  
> "GSvideoBar.prototype.searchComplete = function(fromListItem) {". A  
> few lines below this, there is a line reading "for (var i = 0; i <  
> this.vs.results.length; i++) {". Change this second line to this: for  
> (var i = 0; i < this.vs.results.length && i < 6; i++) {
>
> 4. Save your copy of gsvideobar.js, upload it to your site.
>
> 5. Adjust the line in your previous code reading <script src="http://www.google.com/uds/solutions/videobar/gsvideobar.js?mode=new
> " type="text/javascript"></script> so that the src attribute points to  
> your copy of gsvideobar.js instead of Google's.
>
> All of this said, in the future, please refrain from posting the same  
> thing multiple times on the group. Sometimes it takes a little time to  
> get an answer, especially when your request is for detailed  
> instructions about how to do something. Further, posting the same  
> thing multiple times could ultimately result in you getting banned for  
> spamming the group.
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>

Jeremy Geerdes

unread,
Dec 11, 2009, 6:25:14 PM12/11/09
to google-ajax...@googlegroups.com
You can start new threads. That's not a problem. Just posting the same
thing over and over again because you didn't get an answer is sending
out about 5,500 emails every time. Thanks for understanding, and happy
coding!

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.

If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!

And check out my blog, Adventures in Web Development, at http://jgeerdes.blogspot.com
!


Lucy Paolucci

unread,
Dec 11, 2009, 9:44:26 PM12/11/09
to Google AJAX APIs
The Code Worked & My Video Bar Now Has 6 videos instead of 4. Thank
You! Thank You! Thank You! I have one final question is it possible
to add a arrow button to scroll through the videos in the horizontal
bar. If so what is the specific coding for it? My 6 video thumbnails
are 100 x 75 pixels each.

On Dec 11, 6:25 pm, Jeremy Geerdes <jrgeer...@gmail.com> wrote:
> You can start new threads. That's not a problem. Just posting the same  
> thing over and over again because you didn't get an answer is sending  
> out about 5,500 emails every time. Thanks for understanding, and happy  
> coding!
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>

Jeremy Geerdes

unread,
Dec 12, 2009, 7:47:27 AM12/12/09
to google-ajax...@googlegroups.com
Probably the easiest way to do this would be to use CSS to set the
containing div to the desired width and set its overflow to auto.
Something like the following should work:

#videoBar-bar{width:300px;overflow:auto;}

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.

If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!

And check out my blog, Adventures in Web Development, at http://jgeerdes.blogspot.com
!

Lucy Paolucci

unread,
Dec 12, 2009, 8:36:14 PM12/12/09
to Google AJAX APIs
Thank You, but exactly where would I place #videoBar-bar{width:
300px;overflow:auto;} in the following div code? Again, thank you,
and have a great weekend.

Lucy Paolucci
On Dec 12, 7:47 am, Jeremy Geerdes <jrgeer...@gmail.com> wrote:
> Probably the easiest way to do this would be to use CSS to set the  
> containing div to the desired width and set its overflow to auto.  
> Something like the following should work:
>
> #videoBar-bar{width:300px;overflow:auto;}
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>
> ...
>
> read more »- Hide quoted text -

Jeremy Geerdes

unread,
Dec 12, 2009, 10:14:28 PM12/12/09
to google-ajax...@googlegroups.com
Put it right before this line:

.playerInnerBox_gsvb .player_gsvb {

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.

If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!

And check out my blog, Adventures in Web Development, at http://jgeerdes.blogspot.com
!


On Dec 12, 2009, at 7:36 PM, Lucy Paolucci wrote:

> .playerInnerBox_gsvb .player_gsvb {

Mike Rutter

unread,
Dec 16, 2009, 5:38:00 PM12/16/09
to Google AJAX APIs
Is it possible to return more than 8 results? I have set the overflow
to auto as you described above and would like to be able to scroll
through more than 8 videos in the bar.

Thanks

Mike Rutter

On Dec 13, 3:14 am, Jeremy Geerdes <jrgeer...@gmail.com> wrote:
> Put it right before this line:
>
> .playerInnerBox_gsvb .player_gsvb {
>
> Jeremy R. Geerdes
> Effective website design & development
> Des Moines, IA
>
> For more information or a project quote:http://jgeerdes.home.mchsi.comhttp://jgeerdes.blogspot.comhttp://jgeerdes.wordpress.com
> jgeer...@mchsi.com
>
> Unless otherwise noted, any price quotes contained within this  
> communication are given in US dollars.
>
> If you're in the Des Moines, IA, area, check out Debra Heights  
> Wesleyan Church!
>
> And check out my blog, Adventures in Web Development, athttp://jgeerdes.blogspot.com

Jeremy Geerdes

unread,
Dec 16, 2009, 5:42:56 PM12/16/09
to google-ajax...@googlegroups.com
Yes, it is possible, but it will take some much more significant
changes to the VideoBar code because you can only retrieve 8 results
at a time from the Search API. I have outlined the basic steps in the
blog post linked below, but providing the specific code to implement
this within the VideoBar is beyond the scope of what I can do for free.

http://jgeerdes.blogspot.com/2008/12/how-to-get-all-results-available-from.html

Jeremy R. Geerdes
Effective website design & development
Des Moines, IA

For more information or a project quote:
Unless otherwise noted, any price quotes contained within this
communication are given in US dollars.

If you're in the Des Moines, IA, area, check out Debra Heights
Wesleyan Church!

And check out my blog, Adventures in Web Development, at http://jgeerdes.blogspot.com
!


> --
>
> You received this message because you are subscribed to the Google
> Groups "Google AJAX APIs" group.
> To post to this group, send email to google-ajax...@googlegroups.com
> .
> To unsubscribe from this group, send email to google-ajax-searc...@googlegroups.com
> .
> For more options, visit this group at http://groups.google.com/group/google-ajax-search-api?hl=en
> .
>
>

Oscar

unread,
Sep 24, 2012, 3:25:29 PM9/24/12
to google-ajax...@googlegroups.com
Hi, I know this is an old thread but I've been days trying to make my bar display the 8 results in two rows of 4 videos each. It can't be that complicated! Could you please help me?
> To unsubscribe from this group, send email to google-ajax-search-api+unsub...@googlegroups.com

Jeremy Geerdes

unread,
Sep 24, 2012, 6:39:54 PM9/24/12
to google-ajax...@googlegroups.com
To do what you're wanting, you're going to have to download your own copy of gsvideobar.js and edit it. Specifically, you will need to alter line 402, which should read like this:

if (row == null) {

so that it reads like this:

if (row == null || i % 4 == 0) {

Hope that helps!


Jeremy R. Geerdes
Generally Cool Guy
Des Moines, IA

For more information or a project quote:

If you're in the Des Moines, IA, area, check out Debra Heights Wesleyan Church!

For more options, visit this group at
Reply all
Reply to author
Forward
0 new messages