How would you organize dozens/hundreds of vids on a page?

[raindog308]

I have a web site with tutorials for customers.  The videos themselves are on YouTube and I do the usual iframe embed.

I'm struggling with the best way to organize the videos on the page.  If I just put them one after another, the page is very long.  Say, 100 videos at 360px high = 36000 px, plus spacing.

I've thought of accordions...but even when you expand a section, there's 10-12 videos and the page looks very long, pushing all others to the bottom.

I've thought of a menu at top (like a jqueryui menu with #name links) that scrolls to a section..blah.

At the moment I'm thinking of making small video icons for each tutorial, and then video opens in a lightbox sort of thing.

I have some carousel thing I downloaded from CodeCanyon and never used, so that may be another option.

Just wondering what other ideas people have?  Ideally, a customer would say "I have a question about email", go to the tutorials section, find the email section, and see the videos there.  Anyone have a link to a well-organized page I can model after?

 

[tchen]

Could you take the coursera approach and just put links as your accordion?  The videos themselves are on a click-through page since the still shots would have looked all the same anyways.

 

[HalfEatenPie]

There's multiple approaches. Yep like what @tchen said the accordion is probably the most favorable.

There's also the Youtube approach, where each "playlist" basically just lays out the previews of the video in a standard table-like format (like so: http://www.youtube.com/user/Vsauce/videos )

if they're actually organized then you can also use the row/table format (like so: http://www.youtube.com/playlist?list=LL6nSFpj9HTCZ5t-N3Rm3-HA ).

Honestly, I'd recommend looking at major video sites and seeing how they organize their content. Utilizing parts and pieces here and there to make your own system

 

[hellogoodbye]

Do you absolutely have to put them all on one page rather than divide up the sections with each one getting its own respective page?

If you do, personally speaking I would probably prefer the small video icons and/or title links that open up in lightbox or accordion. I always like to skim quickly through the titles to not only find the one I need but also see what else you have that might be relevant to my needs.

I know this is Fatcow's Tutorials section but it's the first one I thought of that might be somewhat useful:

http://www.fatcow.com/support/tutorials/

While I like the way they've divided up the videos into straightforward sections, clicking on each link takes you to another link (that has a more descriptive title) and then you have to click again to actually reach the embedded video. I find that horribly redundant and a waste of time, so maybe you can just model after the organization in the main section but use the descriptive titles directly on that page and have each link open up in a lightbox? That way you won't have to make hundreds of new pages just to organize all the videos.

 

[perennate]

<ul>

<li><a href="video001.avi">Video 001</a></li>

<li><a href="video002.avi">Video 002</a></li>

<li><a href="video003.avi">Video 003</a></li>

...

</ul>

 

[raindog308]

The videos themselves are on YouTube and I do the usual iframe embed.

<ul>

<li><a href="video001.avi">Video 001</a></li>

<li><a href="video002.avi">Video 002</a></li>

<li><a href="video003.avi">Video 003</a></li>

...

</ul>