Youtube video area is still clickable even when I had it fade out

[Ramon]

Hi,

I tried creating a banner with a Youtube video playing when the banner starts and fade out at the end to show a static image in the background.  

My problem is, the video still seems to be active in the sense that when i hover on top of my static image, the invisible/faded out Youtube video is still clickable and would either play again or open up a new window to Youtube and play a different video (I guess this is because at the end of the video, it shows different related links available)

How can I avoid this?  I just want the video to now be clickable or not play when I fade it out.  Hoping someone here can help.

Thank you!

Best Regards,

- Mon

[San Khong]

Hi Mon,

At the point where the video is already fade out, you can set its visibility property to hidden and it will not be clickable. In the Properties panel of the video, the Visibility is in the Style section.

Thanks,

San

Google Web Designer team

[Ramon]

Hi San,

Whenever I try to set it to hidden for the end frame, it would set the start frame to hidden as well.  I can't seem to have two different visibility style for the video for some reason. :(  Please help.  I maybe doing something wrong at this point but any help would really be appreciated.  Thank you.

Best regards,

- Mon

[San Khong]

Hi Mon,

You are right that visibility will affect all keyframes since it's not a property that can be animated. You can add a timeline event to turn the visibility of the youtube component to hidden when getting to that time. Here is what you can do.

1. Switch the timeline to advanced mode (to see the layers instead of the big thumbnails) by clicking on the icon on the right side of the timeline. 

2. In the Events layer at the top, right click on the time where the youtube video is supposed to fade out and select Add event.

3. Double click on the event marker to open the Events dialog.

4. For Actions, select CSS > Set styles.

5. Select the youtube video as the target.

6. In Configuration, click on Add Property and type visibility:hidden and press Enter. 

7. Click OK to save.

Hope it helps.

[Ramon]

Thank you San for your help!!!  That did it!!!  I really appreciate you taking the time to send me a step by step approach to how to fix my problem.

 Best Regards,

- Mon

[Yan White]

I have the same problem. Tried the steps and it is not working.

Also, why does clicking the action always bring a new dialog to set CSS rather than keeping the previously entered settings?

[Yan White]

I found the solution.

I was wrapping the taparea component in a div, and trying to set visibility on that element.

Once I targeted the actions CSS at the taparea element itself it worked

[San Khong]

Glad it's working for you Yan. Regarding double clicking on the event marker, it always adds a new timeline event. To edit the existing event, you can double click on the event in the Events panel. In the next release, we will provide an easier way to edit the events at the marker when you right click on it.

Thanks,

[Yan White]

Great, yes it took a while to figure that out!

Some things are not that intuitive straight off..

Glad to hear it is in development :)