Issue with Wordpress theme and Vimeo videos for mobile

[lk2surf]

Hi,

I have a Wordpress site with a Press75 OnDemand theme. Its uses the
simple video embedder along with FancyBox to show videos. This works
great except for an issue with mobile devices, mainly iPad. You can
play a video once and once you close it you cannot open another one.
You just get a white box with nothing loading. I believe this is
similar to issue #100 but I am not sure how to apply that patch or if
it is the right thing to to.

Any help you can offer would be greatly appreciated as I have been
looking and posting on Vimeo, Wordpress, Press75, etc. for the last
week and haven't found an answer. I am a graphic artist who can work
in HTML and CSS so if you can explain in laymen terms i'd really
appreciate it. If the answer is really technical and you are not able
to fix, could you recommend a resource for me to find someone to
implement the answer you give.

Thanks in advance! The site is fred-north.com

[JFK]

I don't have an iPad but I use the Blackbaud Adobe Air iBB simulator
your videos play just fine in there ... sorry I can't help further

[Lee Farmer]

Thanks for checking, much appreciated. I wish I was more of a code guru as
I believe it has to do with that issue #100 but don't know what to do to
fix it.

>--
>You received this message because you are subscribed to the Google Groups
>"fancybox" group.
>To post to this group, send email to fanc...@googlegroups.com.
>To unsubscribe from this group, send email to
>fancybox+u...@googlegroups.com.
>For more options, visit this group at
>http://groups.google.com/group/fancybox?hl=en.
>
>

[RavanH]

Is this a similar issue to http://groups.google.com/group/fancybox/browse_thread/thread/c6e3f5811622149a?hl=en#
maybe?

I notice both are using iframe content that works the first time but
remains blank on second opening...

[lk2surf]

Yes..thats it. I cannot figure out why this is happening.

On Jun 4, 6:54 am, RavanH <ravanha...@gmail.com> wrote:
> Is this a similar issue tohttp://groups.google.com/group/fancybox/browse_thread/thread/c6e3f581...

[JFK]

have you tried linking the videos directly using swf type instead?

something like
$("a.vimeo").click(function() {
$.fancybox({
'autoScale' : false,
'title' : this.title,
'width' : 640, //or whatever
'height' : 360,
'href':this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?
clip_id=$1'),
'type' : 'swf'
});
return false;
});

[R.A. van Hagen]

iPad does not play swf... So I guess that would not be an option for the OP

--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/

[JFK]

that's true, I forgot because analyzing the code of your fancybox from
firefox it shows that the content of your iframe within fancybox is an
application/x-shockwave-flash object
I guess they (vimeo) sniff the type of browser type and decides either
to use the swf player or universal player

maybe this would help
http://vimeo.com/api/docs/player#universal

[Lee Farmer]

Does anyone know how to apply a patch? This is a possible answer but I'm
not sure what to do with it:
http://code.google.com/p/fancybox/issues/detail?id=100

RavanH do you have any further thoughts? I noticed you were able to help
quite a few people on Wordpress.

Thanks all, I really appreciate the help.

[RavanH]

Lee, it looks indeed like issue #100 is what's going on... And as
such, I do not have any suggestions for integration into WordPress
other than applying that patch.

I have not tested it yet and cannot say if the patch will have any
unwanted side-effects. JFK? What do you think?

On Jun 5, 7:19 pm, Lee Farmer <l...@2143design.com> wrote:
> Does anyone know how to apply a patch? This is a possible answer but I'm
> not sure what to do with it:http://code.google.com/p/fancybox/issues/detail?id=100
>
> RavanH do you have any further thoughts? I noticed you were able to help
> quite a few people on Wordpress.
>
> Thanks all, I really appreciate the help.
>

[RavanH]

JFK, it is exactly that universal player method that prescribes using
an iframe. Youtube has that same feature these days. The content that
is fed by Vimeo and Youtube auto-detects whether to use flash or html5
player depending on browser and OS. Most viewers will still see the
flash player but those on iPad or using Google Chrome ( or those that
have a HTML5 ready browser like FF4 or Opera and that are on the HTML5
beta program: http://youtube.com/html5 ) will see a HTML5 player.

There is nothing wrong there an this works just fine when embedded in
normal pages but somehow, in FancyBox, that iframe source gets
replaced by "about:blank" upon closing the lightbox overlay. Re-
opening it, this results in that blank content instead of the
original.

On Jun 5, 12:12 am, JFK <jfk.d...@gmail.com> wrote:
> that's true, I forgot because analyzing the code of your fancybox from
> firefox it shows that the content of your iframe within fancybox is an
> application/x-shockwave-flash object
> I guess they (vimeo) sniff the type of browser type and decides either
> to use the swf player or universal player
>

> maybe this would helphttp://vimeo.com/api/docs/player#universal

[Lee Farmer]

Thanks Ravan, Could you give me an idea on how to apply the patch? I'm
willing to give it a try and assess any side effects. I noticed I am using
fancybox 1.3.1 and the patch is related to 1.3.4 so my line 946 is
different. Could you suggest where I paste the patch code in order to give
it a try?

[R.A. van Hagen]

Lee, is there any possibility for you to upgrade to FancyBox 1.3.4 or is
it too much integrated into your WordPress theme? Or is it a plugin you
are using?

If you cannot upgrade, tell me if the theme is using a
compressed/minimized version... In any case, I suspect there is not much
difference between the two versions so if you can find a code snippet like
this in 1.3.1:

content.find('iframe').attr('src', isIE6 &&
/^https/i.test(window.location.href || '') ? 'javascript:void(false)' :
'about:blank');

then you basically need to wrap that in an if statement like so... Put
this right in front of it:

if (currentOpts.type === 'iframe') {

and a closing bracket right after it:

}

...that's it really...

[Ben Dunlap]

I posted issue #100, and from what I could tell the problem was
introduced in 1.3.2 and is still present in 1.3.4. My client and I
didn't want to maintain a patched version of Fancybox so we just
downgraded to 1.3.1, which doesn't have that particular problem
(although it does have other bugs that were fixed later, so ymmv).

Thanks, Ben

[Lee Farmer]

It's a full version of 1.3.1. I believe its pretty integrated with the
theme as it came packaged with it and I'm not sure what effect it would
have to upgrade. The developer did mention he will be coming out with an
update of OnDemand in the near future.

I did not find that line of code after manually searching and using find
and replace. I did find:

$(window).unbind("resize.fb scroll.fb");
$(document).unbind('keydown.fb');

Which was shown on the patch. So after those lines of code I added:

if (currentOpts.type === 'iframe') {

content.find('iframe').attr('src', isIE6 &&
/^https/i.test(window.location.href || '') ? 'javascript:void(false)' :
'about:blank');
}

Upon testing on Mac/PC across various browsers everything seems to be
working fine. I will need to go by the Apple store to check it on iPad
though since I don't own one. Will follow up with the result.

[Lee Farmer]

Thanks Ben, Ravan and all for the follow up with this. I just tried the
patch and the result is still the same in ipad, you can watch a video once
and any video after that gets an empty white box. Since I've been posting
for the last couple weeks on wordpress, press75, vimeo, here and other
spots and cannot find an answer I think I'll just have to disable this
feature on my clients website and try to hire a developer to dig in and
solve the issue. If anyone has other suggestions or knows a developer who
can solve this I'd appreciate any info you can send over.

[RavanH]

Lee, I'm not a javascript guru nor do I own an iPad, so I'm affraid I
cannot get to the bottom of this.

The only thing I can do for you is integrate FancyBox 1.3.4
*including* Ben's patch into the On-Demand theme. If that does not
solve the issue, you will need to look for a jQuery guru with an
iPad ;)

Let me know if you need the help.

[JFK]

I don't know if the issue #100 has something to do with the original
post of this thread .... maybe
The difference between fancybox v1.3.1 and fancybox v1.3.4 is that in
the first, the inline content is "cloned" into the fancybox so it
actually remains with its own properties but hidden in the flow of the
document ... while in the second, the inline content is "moved" into
the fancybox and a (hidden) temp container is left instead

what is happening as described in the issue #100 is that once the
"moved" iframe moves back to its original position in the document, it
looses the value of its src attribute and gets a value of
"about:blank" hence that the second time fancybox is fired it just
displays an empty (blank) box. Bug or not is a fact!

I have not tested the proposed patch because I am not particularly fan
of neither, hacking the original js file or downgrading the fancybox
version so I guess the issue could be addressed within your own custom
fancybox script (and still using the latest version of fancybox) so:

having in your document
<a class="testFrame" href="#myframe">open my inline iframe in
fancybox</a>
and
<iframe id="myframe" src="http://google.com/" width="800"
height="380"></iframe>
and
$("a.testFrame").fancybox();

the code above will trigger the issue #100 (notice I didn't set any
dimension to the fancybox script since the iframe has those values
declared)

to see what's happening let's do this:
$(document).ready(function() {
var mySRC1 ="";
var mySRC2 = "";
$("a.testFrame").fancybox({
'onComplete': function() {
mySRC1 = $('#myframe').attr('src');
alert ('the value of the iframe src attribute is = '+mySRC1);
},
'onClosed': function() {
mySRC2 = $('#myframe').attr('src');
alert ('the value of the src attribute after closing fancybox is =
'+mySRC2);
}
});
}); // ready

the first alert after we have fired fancybox will say that src="http://
google.com/"
the second alert after we closed fancybox will say that
src="about:blank" ...as issue #100

however, since we cached the original value of the src attribute in
the mySRC1 variable, as a workaround we could set it back to the
iframe onClosed .... like:
$('#myframe').attr('src',mySRC1);

so the final script:
$(document).ready(function() {
var mySRC1 ="";
$("a.testFrame").fancybox({
'onComplete': function() {
mySRC1 = $('#myframe').attr('src');
},
'onClosed': function() {
$('#myframe').attr('src',mySRC1);
}
});
}); // ready

the code above will restore the value to the src attribute so then we
can fire and close fancybox as many times as we want

[R.A. van Hagen]

JFK, that's an excellent work-around... it might end up in my WordPress
plugin if you don't mind :)

I agree that issue #100 seems unlikely to be related to the original posts
issue after all. But I wonder if this cloning business you describe, is
what trips the iPad up with v1.3.1 ... If so, then upgrading to v1.3.4 +
applying either Ben's patch or your work-around might just solve the issue.

[JFK]

Lee Farmer is using WordPress so he should be using your plugin (with
v1.3.4) ... and this workaround won't hurt