Fancybox 2.0.4 and Vimeo

Question

I have many difficulties integrating the new fancybox (V.2.0.4 g81c12d7) with the new iframe vimeo embed code. Does anyone have a solution?

Answer 1

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

Follow these steps:

A). On the vimeo page, select one of your videos, then select the " embed " icon (above the video).

IN). Get the iframe code that looks like this:

 <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> 

FROM). Extract the contents of the src attribute and set it as the href your link, for example:

 <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) script user interface should look like this:

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

Notification I got width and height from iframe code.

UPDATE (June 25, 2013): Another simple and easy way to watch vimeo videos in fancybox (v2.1.5, as it is today) uses fancybox media assistants. Learn more about fooobar.com/questions/1392933 / ....

Answer 2

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

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

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

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

Now I call the 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