Jump to content
GreenSock

PapaDeBeau

Loading & Annimating Embeded Youtube Frames - GreenSock

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

When I load an embedded youtube frame into a div and either

 

a) Annimate it

B) fade it

 

It always has issuse. If I annimate it the box shows up BLACK.

If I fade it the video shows up for a second and it also becomes black.

 

Is there a work around?

 

Thanks

 

-Ed

Link to comment
Share on other sites

Hi Ed,

 

I'm not really following the question.

 

Is this question pertaining to LoaderMax or our animation tools (TweenLite, TimelineLite)? If the latter, Flash or Javascript?

 

The reason I ask is because you posted in the forum dedicated to our tools related to loading assets with Flash (LoaderMax) but the question sounds like it has more to with animation related the Javascript (as you mentioned a youtube frame and div).

 

Please elaborate.

 

Thanks!

Link to comment
Share on other sites

Yes it is with the javascript. Sorry I think I posted in the wrong section. I just saw loading and I thought well I am having issues loading.

 

Anyway, have you had an issue with this before?

Link to comment
Share on other sites

No worries on posting here. Totally understandable.

 

I imagine that the browsers are reluctant to fade a div that holds the youtube swf but I haven't done any tests. Not so sure what happens if you try the same thing on the <video> tag with the youtube html5 player.

 

Without seeing an example of what you are trying to accomplish its very difficult to diagnose or explain what the exact issue is.

 

I would suggest taking GSAP out of the equation and testing/proving that the css opacity property can be set on the element in question.

Link to comment
Share on other sites

Regarding the youtube animation of div. I finally settled for it to just appear without animation as a work around but if I try to animate it you see it goes BLACK. I animate it OUT on the home screen but can't use it after animation because it is black.

 

Just a heads up. Not sure if you have any suggestions for this one.

 

I am refering to the video on the home screen of this page: http://beaubird.com/hope.php

 

See how it goes BLACK after you click on a tab at the top? Its unusable after an animation of sorts. I am using firefox btw.

Link to comment
Share on other sites

Hm. I'm not seeing it turn black when I click on a tab (even in Firefox). I tried on Windows and Mac.

Link to comment
Share on other sites

I'm getting the same results as Jack. Also, once clicking on a tab, I don't see a way to go back to the video.

Link to comment
Share on other sites

Here is an EXAMPLE of the video turning black when I animate it: http://www.massmediamail.com/fortheholychurch/?p=projects

 

Let me know when you viewed this because I think I found a work around and when you did I am going to make the edits so it can work.

 

Basically it has to do with the x and y properties for some reaon. I believe if I animate the Left and Top instead then the video will be able to be seen and clicked on. Right now, using firefox 18, on my computer it just shows a black box and I can't click on it.

 

Agian I will make the edits and test it after you confirm it doesnt work.

Link to comment
Share on other sites

With FireFox 18 (MAC) I see the video. It appears to move with the entire div that it is in. Also I can see the opacity changing. I can click on the video and it plays.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×