Greensock Lightbox with Youtube Embed

[phillip_vale]

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.

Cheers,

Phil Vale

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

[mvaneijgen]

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. 

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js

 

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

[phillip_vale]

Thanks @mvaneijgen, still a bit of a newbie i'm afraid so really appreciate the help and advice.