iFrames like YouTube not clickable after Tween in FF

[themepunch]

Hi Guys,

 

i have something new here: http://jsfiddle.net/VxvsS/5/  You see two YouTube Containers. One is tweening, one is not. In FF i.e. 25, 26 or also in Beta 27 (Mac, PC)  the Hovers working well, but no click available any more on the iFrame element with Tweening on it, or by tweening any of its parrent container. Do you know why ?

 

In my real situation i need to wrap the container in more levels, and animate parrent containers also, but to make easy the first debug, i only wrapped the iframe in one div.  Any idea, solution help would be much appreciated here.

 

Thanks a lot,

 

Krisztian

[jamiejefferson]

It looks life Firefox/Flash isn't liking the CSS transform. I just get a black box that doesn't respond to left or right click.

 

If you change it to

<div id='test2' style='transform:translate3d(0px, 0px, 0px);'>...</div>

and remove all tweens you'll see the same thing happening, so at least this isn't specific to GSAP.

 

A quick google for 'youtube embed css transform' led me to this stackoverflow question. The solution seems to be adding ?wmode=transparent to the youtube URL, which I added to the fiddle and it seems to be working.

[Carl]

Awesome work, Jamie. Thanks!

[themepunch]

Hi,

 

This is really strange, since even if i add both (wmode attribute and ?wmode=transparent to the url in the iframe, issue still exist.  

<iframe width="560" height="315" src="//www.youtube.com/embed/9QscURRuF0g?wmode=transparent" frameborder="0" wmode="Opaque" allowfullscreen></iframe>

Here again an updated version: http://jsfiddle.net/VxvsS/6/

 

I guess i need to talk to the FF guys who are far much slower than you guys are ! 

 

You are pretty quick and awesome ! 

 

Cheers,

 

Krisztian

[jamiejefferson]

I'm not sure what to say, that fiddle works fine for me. If I take off the wmode=transparent it goes black again. Firefox 26.0, Flash 11.9.900.170, Windows 7 SP1.

 

Also, wmode is not a property of iframe, its a mode for the flash embed in the Youtube iframe. I don't think that wmode="Opaque" is going to do anything at all.

[Jonathan]

yep Jamie, here are resource links to both YouTube url parameters and flash parameters that support what Jamie said about wmode

YouTube's player parameters dont have wmode:
https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Of course like Jamie said, the only info on wmode is on flash help docs:
http://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html

browsers that support wmode:
http://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html#main_Browser_support_for_Window_Mode__wmode__values

window - The SWF content plays in its own rectangle ("window") on a web page. The browser determines how the SWF content is layered against other HTML elements. With this value, you cannot explicitly specify if SWF content appears above or below other HTML elements on the page.

direct - Use direct to path rendering. This attribute bypasses compositing in the screen buffer and renders the SWF content directly to the screen. This wmode value is recommended to provide the best performance for content playback. It enables hardware accelerated presentation of SWF content that uses Stage Video or Stage 3D.

opaque - The SWF content is layered together with other HTML elements on the page. The SWF file is opaque and hides everything layered behind it on the page. This option reduces playback performance compared to wmode=window or wmode=direct.
transparent - The SWF content is layered together with other HTML elements on the page. The SWF file background color (Stage color) is transparent. HTML elements beneath the SWF file are visible through any transparent areas of the SWF, with alpha blending. This option reduces playback performance compared to wmode=window or wmode=direct.

gpu - Use additional hardware acceleration on some Internet-connected TVs and mobile devices. In contrast to other wmode values, pixel fidelity for display list graphics is not guaranteed. Otherwise, this value is similar to wmode=direct.

[themepunch]

Since it is not related on Greensock at all, i am agree with you to look for the solution somewhere else   

 

However it seems on mac in ff 26 the only solution is to remove backface visibility and any transform matrix etc. of any container and parrent containers of the iframe.

 

Wmode does not seem to help for me (macbook, imac tested). 

 

Anyway the interaction failure on iframes like  youtube, vimeo, soundcloud etc. has been reported and as bug recorder via Bugzilla.  They promissed to solve the issue soon

 

Thanks again for all your feedbacks and support again !

 

Krisztian

[Jonathan]

i noticed after the animation .. if i removed the inline styles transforms on #test2 the iframe became click-able again..

 

have you tried adding clearProps: "all" or "z" to your tween:

 

example: http://jsfiddle.net/VxvsS/9/
 

TweenLite.fromTo(jQuery("#test2"),2.5,
     {
        z:0.1,
        autoAlpha:0
     },
     { 
        z:0,
        autoAlpha:1,
        // clear inline styles when the tween completes
        clearProps:"all" 
});

clearProps - A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes.

 

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

does that help?

[themepunch]

Hi,

 

yes, it helps. I done it with the jQuery .css function using    

transform:"none",'-moz-transform':'none','-webkit-transform':'none'

settings to the item, and parrent items, and it help. This is a Bug in FF

 

Really appreciate all your help and still, the best Engine ever ! 

 

Cheers,

 

Krisztian