Jump to content
Search Community

Greensock Lightbox with Youtube Embed

phillip_vale test
Moderator Tag

Recommended Posts

Hi everyone,

I have tried to create a lightbox style Greensock animation complete with a Youtube embed.

Only thing i am having trouble with is when i hit the CLOSE button the video keeps playing.

From what i can tell reading forums the Youtube API changes frequently. A recent post i found mentioned to included the following in the closing code:


$('#moviePlayer').each(function(){this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')});


As well as adding enablejsapi=1 in the iframe of the actual embed.


Any help is much appreciated.


Phil Vale

See the Pen KKReXRW by phillipanthonyvale (@phillipanthonyvale) on CodePen

Link to comment
Share on other sites

Hey @phillip_vale this is not really a GSAP question, more a "How does the Youtube API work"


You need to add enablejsapi=1 to the url of the YouTube url like so https://www.youtube.com/embed/BwZs3H_UN3k?enablejsapi=1 then the code you found works. 






You're loading really old versions of GSAP, any reason for this? GSAP is currently at version 3.11.2. Since version 3 (launched in 2019) there is no more need for TimelineMax and TweenMax , they have been all condensed to just gsap . I highly recommend using the new syntax is much easier to read/use and I recommend always using the latest version. Take a look at the article below if you want to get up to speed.




See the Pen VwxdxWM?editors=1011 by mvaneijgen (@mvaneijgen) on CodePen

  • Like 3
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.
  • Create New...