Need help with WP/CSS problem...

[SlamDesigns]

Hey guys, long time no post. Hope everything is going well, and everyone is making a ton of cash! Anyway, I'm having a little problem with something I'm working on, and I knew that someone here could probably help me out.

I'm putting together a WordPress site for one of my buddies, and he wants the entire top (under the header and nav) of the homepage to be a video player sort of thing. Big "Featured Video" on the left and then links to his "Previous Videos" out to the right. When you click a link on the right, the previous video opens up in the featured video section. I think the pic will pretty much explain what I mean...



Now, the problem...I have evidently forgotten how to make that happen. Can anyone here help me out please? Do I need to do that with an iframe (ugh!) or is there some way I can do that with the <DIV>? Any help you guys can give me would be greatly appreciated as I have been beating my head off a wall for a couple hours trying to figure this out.

Thanks,

- Slam

[Robocrop]

Show the site when its finished

[SlamDesigns]

Show the site when its finished

Oh, I most certainly will...but it's probably nothing you will be interested in. It's a wrestling site.

So, does anyone have any ideas on how I can do what I need to do? Thanks (again) in advance.

[fris]

you can do this via jquery

[SlamDesigns]

you can do this via jquery

Ah Fris...the master of the WordPress! I should have known that you'd have a solution. Would you mind going into a little (or even a lot. lol) more detail though. I'll be honest, I haven't touched the code of a page in probably 5 years...I'm waaaaaay out of date on things like jquery.

Thanks,

-Slam

[SlamDesigns]

Bump back to the front page. Thanks!

[fris]

Bump back to the front page. Thanks!

a few ways to go about this.

heres an example (this is for pics)

http://www.cryer.co.uk/resources/jav...13_gallery.htm

would need to modify it for videos.

or jquery

<ul>
<li><a href="#video1" class="video">Video 1</a></li>
<li><a href="#video2" class="video">Video 2</a></li>
<li><a href="#video3" class="video">Video 3</a></li>
<li><a href="#video4" class="video">Video 4</a></li>
<li><a href="#video5" class="video">Video 5</a></li>
<li><a href="#video6" class="video">Video 6</a></li>
<li><a href="#video7" class="video">Video 7</a></li>
</ul>

<div id="videodiv">Video code</div>

$('.video').each(function() {
  $(this).click(function(event) {
      event.preventDefault();
      var video = $(this).attr('href');
      $('#videodiv').html('<h1>Hello</h1>');
  });
});

of course you would replace <h1>hello</h1> with the actual embed function.

[Zayne E.]

Surf the net....there are solutions out there. The only possible issue with fris' example is it's a little oversimplified for a video gallery -- once a video is playing, it will continue playing (in a hidden div) when the next video is placed in view. If there is sound...well...LOL

[fris]

here is a sample using youtube

http://jet.li/yt/

[SlamDesigns]

Cool guys...thank you! I am testing out some of the stuff right now, seeing what I can "mix 'n match" and make work.