[Plugin: Easy FancyBox] Easy Fancy Box and HTML5 Video

The current stable version uses only Flash but HTML5 support provided by Vimeo and Youtube is planned for the next release. I’ll keep you posted when it’s available in the development version…

Soon ??

NOTE: It will be an incorporation of the new iframe embed code that both Vimeo and Youtube present today. It’s then up to the video networks to stream the correct (compatible) version to the browser.

gospeljohn, I’ve just uploaded a new development version that is adapted to use the new iframe embed code for Vimeo, Youtube and Dailymotion. I cannot force the use of HTML5 but at least this means it leaves it up to those sites to detect whether to use Flash or HTML5 embedding automatically. Please note: Most HTML5 players are still in beta/testing stage so even if does not work in all cases at the moment, support should improve in the future…

If you have time to test, I’d much appreciate it: Download the dev version from https://downloads.www.ads-software.com/plugin/easy-fancybox.zip and upload the files to your sites /wp-admin/plugins/easy-fancybox/ directory, overwriting the current stable version.

Let me know the result ??

Thanks… I’m out of town the rest of this week but I’ll give it a go this weekend. thanks again!

Installed it and it works!

Now I’m trying to figure out how to enable auto-play feature so that the video plays immediately when opening in the fancy box.

Hmmm… autoplay=1 works on Youtube and Dailymotion but apparently with Vimeo that value is not passed correctly. If I find out why, I’ll upload a fix and let you know.

Ok, a fix has been uploaded to SVN … wait at least half an hour for the changes to propagate and then download https://downloads.www.ads-software.com/plugin/easy-fancybox.zip again. Upload the new easy-fancybox-settings.php file (overwriting the old one) and it should work.

Let me know if you run into more issues and thanks for testing ??

Vimeo autoplays on the PC side now correctly… but Safari on the iPad doesn’t autoplay yet. It loads up fine just needs another click to play.

…but Safari on the iPad doesn’t autoplay yet…

The autoplay parameter is passed correctly to Vimeo now as shown by the fact that on other browsers it works…

From a short but clear response by a Vimeo staff member on https://vimeo.com/forums/topic:35026 it appears that video autoplay just is not possible on mobile devices.

I’ve used the instructions here with the new vimeo embed code and it works well.

How can I set a different size for each Easy Fancy Box frame so that different Vimeo videos on the same page play in different frame sizes, like 640X360, 400X225, etc.?

my test site is:
https://www.erantahor.com/wp

Passing different parameters per instance is not implemented yet… But it is planned for a future version.

Until then, you might try a different approach: Inline content. There are basic instruction on https://www.ads-software.com/extend/plugins/easy-fancybox/faq/ and when you paste the Vimeo share code inside the div with ID (inside the hidden div) and then give that div width and height ( example : style="width:400px;height:255px" ). Just make sure each instance has a different ID otherwise it will not work.

this is great. many thanks. it’s working with different frame size parameters for each instance on the same page:
https://www.erantahor.com/wp/?page_id=218

However the same thing happens both on safari 5.0.5 and Firefox 4.0.1: when I stop playing the clip (by clicking outside the lightbox), and click on the same thumbnail link again Fancy Frame comes up as a white empty frame without the Vimeo clip. In other words I can only play each clip once on a page. If I want to play it more than once I have to reload the page. Any ideas?

Is it possible to set autoplay to on (=1) with inline content? where would i place the “autoplay=1” tag?

Yes, I see it happening on Opera 11 and Chrome too.

Closing FancyBox, the iframe’s src=”…” (source link) seems to get removed and replaced it with src=”about:blank”.

I have NO idea why that is happening ?? but I would guess it is a FancyBox thing. You might get an answer on the FancyBox forum

thanks for the suggestion will post there.

Solution (file : easy-fancybox/easy-fancybox.php)

Replace

echo '}) )'.$trigger.';';

in

echo '
		, \'onComplete\': function() {
			mySRC = $($(this).attr(\'href\') + \' iframe\').attr(\'src\');
		},
		\'onClosed\': function() {
			$($(this).attr(\'href\') + \' iframe\').attr(\'src\',mySRC);
		}
		}) )'.$trigger.';';

Hi everyone,

I have the same problem as erant a few posts up (different video sizes on vimeo on the same page). I am trying the suggested inline solution like this:

<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1">
<a href="https://vimeo.com/32906287" ></a>
</div></div>

<a href="#fancyboxID-1" class="fancybox-vimeo">Test</a>

but all i’m getting is an empty overlay box.

help! please? I’m desperate!