View Full Version : Vimeo with Fancy Box

12-04-2014, 12:23 AM
Hi Guys.

I'm trying to gear up my site for submission tomorrow, and one big thing is getting the video page nicer.

I'm happy with the fancy box for my galleries
example: http://thoreaubakker.com/test/sculpture.html

but am hoping to do the same thing with my video page:

Here's the code for an image in dream weaver:

<td colspan="4"><a class="fancybox rolloverLink bottomMargin" rel="cas" href="image/1080x720casette1.jpg"><img src="image/350x233casette1.jpg" width="350" height="233" alt="lower1" /></a></td>

But I'm getting an iframe from Vimeo and don't know where to put it.

Should I try and make this work, or implement a different light box geared for video?

Any tips appreciated,


12-04-2014, 07:12 AM
Ok I think I've got it.

Been searching for hours, and I managed to do it by creating thumbnails of the videos, then linking to the vimeo file in the pop up.

Here's the link:

If anyone can help me embed rather than link, that would be much faster :)

This looks promising, but I had no idea where to put the three different codes lol http://stackoverflow.com/questions/17202012/fancybox-iframe-not-closing-second-time/17202629#17202629

12-04-2014, 08:35 PM
Nothing wrong with the way you've done it mate. The videos open in a lightbox and then play. They are being streamed from Vimeo. This is perfect implementation in my view. Even if the videos were embedded directly into the page they would still work in the exact same way, streamed from Vimeo. You can use html5 video and serve them yourself but Vimeo or youtube is a much better way to go for something like this. Vimeos servers will be much better than anything you or I could get hold of.

You can use anything as the link doesn't have to be an image but an image works well in this case.

If you need any more help before you submit and you need a quick response just email me. Anything of any use I'll post back on the forum.

I think you've done a good job for your first website. I bet you've learnt loads?