fancybox 2.0.4 and Vimeo

Question

i have a lot of difficulties to integrate the new fancybox (V.2.0.4 g81c12d7) with the new iframe vimeo embed code. does somebody have a solutions?

Answer 1

Yes, the easiest way is to use the new vimeo's "universal player" to embed your videos.

Follow this steps:

A). From the vimeo page choose of one of your videos, then select the icon "embed" (over the video).

B). Get the iframe code that looks like:

<iframe src="http://player.vimeo.com/video/34792993?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

C). Extract the content of the src attribute and set it as the href of your link like:

<a class="vimeo" href="http://player.vimeo.com/video/34792993?title=0&amp;byline=0&amp;portrait=0">open vimeo in fancybox</a>

D). Your fancybox (v2.x) custom script then should look like:

<script type="text/javascript">
$(document).ready(function() {
 $(".vimeo").fancybox({
  width: 400,
  height: 225,
  type: 'iframe',
  fitToView : false
 });
});
</script>

Notice I got the width and height from the iframe code.

UPDATE (Jun 25th, 2013) : another easier and simple way to watch vimeo videos in fancybox (v2.1.5 as today) is using the fancybox media helpers. Check https://stackoverflow.com/a/17202629/1055987 for further reference.

Answer 2

Because we can only resize the iframe video if it is in our own domain, I solved this problem by copying all html content of

http://cache.vevo.com/m/html/embed.html

To http://localhost/vevo.html. Then, changed the CSS:

    #videoPlayerSWF {
        width: 100%;
        height:100%;
    }

Now, I call fancybox url using:

http://localhost/vevo-embed.html?video=USUV71402745

Which has the same HTML, CSS, and JavaScript as:

http://cache.vevo.com/m/html/embed.html