Put to div's next to each other and one disappears....

[Kingsly]

I know just enough code to dig my own grave...

Anyway, trying to put two (eventually three) embedded vimeo's onto a page, where they load into a fancybox when clicked.

<DIV ALIGN=left>
<a class="fancybox" href="#testube"><img src="http://noteworthyphotography.com/wp-content/uploads/2010/10/habitat.jpg" width="400" height="197" alt="Habitat For Humanity" /></a>

<div style="display:none" id="testube">
<iframe src="http://player.vimeo.com/video/15375984?autoplay=1" width="560" height="338" frameborder="0"></p>
</div>

<DIV ALIGN=right>
<a class="fancybox" href="#testube"><img src="http://noteworthyphotography.com/wp-content/uploads/2010/09/A011_C024_1031CF_00390.jpg" width="400" height="197" alt="Noteworthy Reel" /></a>

<div style="display:none" id="testube">
<iframe src="http://player.vimeo.com/video/9085243?autoplay=1" width="560" height="338" frameborder="0"></p>
</div>

However, when I do that only the first element in the line loads. If I reverse the order they are in the code (the one that's aligned right is listed first in the html) then that one will load.
See the website to see what I'm talking about.

Help?? I'm a film guy, not a web designer!

 

[angelwatt]

One issue, you're using the same id attribute (testube) more than once. An id, by definition, can only exist in one spot on the page. This will be part of the problem. Another big one, your code is not valid. Viewing the source code in Firefox shows the syntax coloring goes awry when you get to the iframe code, which is a strong indicator of badly formatted code. Proper use of iframe.

 

[elppa]

Edit: scrap that, mis-read on my part.

As angelwatt suggests the problem is likely fancy box is using the id to determine which video to load and the ids are both the same (test tube). So for the second video make the id of the <div> "testtube1" and also change the href of the anchor (<a>) to "testtube1".

Try this:

<DIV ALIGN=right>
    <a class="fancybox" href="#testube1"><img src="http://noteworthyphotography.com/wp-content/uploads/2010/09/A011_C024_1031CF_00390.jpg" width="400" height="197" alt="Noteworthy Reel" /></a>
    <div style="display:none" id="testube1">
        <iframe src="http://player.vimeo.com/video/9085243?autoplay=1" width="560" height="338" frameborder="0"></p>
    </div>
</div>

And if it works then just keep incrementing the count for each new video you wish to add to the page.

 

[whatsgooddan]

what happens when you use the old embed code? (from vimeo)

 

[Kingsly]

Edit: scrap that, mis-read on my part.

As angelwatt suggests the problem is likely fancy box is using the id to determine which video to load and the ids are both the same (test tube). So for the second video make the id of the <div> "testtube1" and also change the href of the anchor (<a>) to "testtube1".

Try this:

<DIV ALIGN=right>
    <a class="fancybox" href="#testube1"><img src="http://noteworthyphotography.com/wp-content/uploads/2010/09/A011_C024_1031CF_00390.jpg" width="400" height="197" alt="Noteworthy Reel" /></a>
    <div style="display:none" id="testube1">
        <iframe src="http://player.vimeo.com/video/9085243?autoplay=1" width="560" height="338" frameborder="0"></p>
    </div>
</div>

And if it works then just keep incrementing the count for each new video you wish to add to the page.

What does the id reference? Do I have to change something in the fancybox css? I pasted your above code in and still have the same problem. It makes sense what you're saying though, how it needs seperate id's to load everything okay.
I just completely fail at any and all code.

 

[angelwatt]

The id was only one issue, the invalid HTML is the bigger one, which you need to fix. You're not using the iframe tag correctly.

 

[Kingsly]

The id was only one issue, the invalid HTML is the bigger one, which you need to fix. You're not using the iframe tag correctly.

I see. How do I fix it? I was serious when I said I completely fail at code.

Wordpress is a dangerous thing for somebody who thinks they're smart enough to do fancy html magic with google and copy/paste...

 

[angelwatt]

I see. How do I fix it? I was serious when I said I completely fail at code.

I gave a link before on the iframe tag. You never close your iframe tag.

 

[Kingsly]

Oh man, I completely overlooked the link you included. Okay, now we're cooking. Closing the iframe tags made the second video appear, and numbering the id's as ellpa suggested made the second video load correctly.

Now, one last issue and we can close this case! As you can see on the site, the second element loads below the first. How do I get them on the same line?

 

[angelwatt]

Well, you're using div tags, which are block elements, which means they naturally have a line break before and after. There's also p tags in between your images, which are also block elements. You can either use CSS to make the block elements display as inline ones (using the display property) or you can float them (using the float property). The link above will get you rolling on the block to inline technique. Lastly, you could move them all into the same div in their own anchor tag (<a>).