Auotplay a YouTube video after animations

[lynette 0 Likes (Newbie)]

Hi,

 

I have just started working the Tweens here, so please if you can help me on probably a simple thing for some.

 

I would like to:

 

1. Add a YouTube video that autoplays after an animation (not when the banner starts, so the video starts autoplays after the animation).

2. When clicking anywhere on the banner to be taken to the external link, the video stops.

3. The video stops after playing for example, 10 seconds.

 

Can this be done?

 

I have been trying and looking into it and unable to combine my animation and Youtube video together. 

[Jonathan 5,176 Likes (Superhero)]

Hello lynette and welcome to the GreenSock Fourm!

 

This looks like more of questions on how to use the YouTube Iframe API than a GSAP API specific question.

 

Please see: https://developers.google.com/youtube/iframe_api_reference

 

But regarding your questions:

1. Add a YouTube video that autoplays after an animation (not when the banner starts, so the video starts autoplay after the animation).
   You would use the GSAP special property onComplete see TweenMax Docs
   http://greensock.com/docs/#/HTML5/GSAP/TweenMax/
   Use YouTube Iframe API to control playback.
   https://developers.google.com/youtube/iframe_api_reference
    
2. When clicking anywhere on the banner to be taken to the external link, the video stops.
   Again this would be using the YouTube Iframe API within a click event handler then call player.stopVideo()
   https://developers.google.com/youtube/iframe_api_reference
    
3. The video stops after playing for example, 10 seconds.
   Again this would be using the YouTube Iframe API code to disable autoplay so it only plays once after playback
   https://developers.google.com/youtube/iframe_api_reference

Happy Tweening

[joe_midi 238 Likes (Specialist)]

This could work, but you'd have to remember on mobile devices an autoplay call will probably need to be triggered from a user event stack.

[Jonathan 5,176 Likes (Superhero)]

Valid point Joe,

 

If you use the Google YouTube Iframe Player API, there are instances when Mobile might not play nice. You can get around this by using a custom play button that is hidden, and trigger that with a click event instead.

 

https://developers.google.com/youtube/iframe_api_reference?hl=zh-TW#Mobile_considerations

 

Since like joe said above webkit based browsers on mobile might stop play unless its from a user interaction. that is why you fake a click on a hidden play button.

 

Also you can pass ?autoplay=1 in the YouTube Iframe src attribute. For example:

<iframe src="https://www.youtube.com/embed/GjXUhpYA168?autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>

Happy Tweening

[lynette 0 Likes (Newbie)]

Thank you all for you replies.

 

@Jonathan, I have done both, but I am just not sure how to code it up. The first one I have done it like this:

.to($artist, 0.5, {x:-700,opacity: 0, ease:Expo.easeOut, onComplete:onYouTubeIframe}, "+=2.0");
    
    function onYouTubeIframe() {
       var player = new YT.Player('player', 
        {
          height: '461',
          width: '820',
          videoId: bdCV1rNvjCE,
          playerVars: {
              'controls': 0,
              'showinfo': 0,
              'fs': 0,
              'enablejsapi': 1,
              'start': 10,
              'rel': 0,
              'modestbranding': 1,
              'iv_load_policy': 3
          },
          events: 
          {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
          }
        });
    }

onYouTubeIframe();

But it doesn't work, I don't know what I am doing and what I am doing wrong as a matter of fact! 

 

The second option, adding the autoplay at the end of the URL, makes the video autoplay onload, not after the animations.

 

@Joe, do you mean having the autoplay=1 at the end of the URL?

 

This could work, but you'd have to remember on mobile devices an autoplay call will probably need to be triggered from a user event stack.

 

 

Does this makes any sense??

[Jonathan 5,176 Likes (Superhero)]

Hello again lynette,

As far as the YouTube Iframe Player API. You don't place all that YouTube code inside your onComplete callabck. You would have all that YouTube code outside of the onComplete so it runs normally after page load. This way it can load the YouTube API when the page is ready.  Then when page loads it calls event.target.stopVideo(); when onPlayerReady() is called so the video is stopped when the player is ready. And then inside the onComplete callback you call player.playVideo() . See playback controls here for the API: https://developers.google.com/youtube/iframe_api_reference#Playback_controls

 

When you call player = new YT.Player('player', .. you are setting up the player for the YouTube API.. then you simply calling play player.playVideo() inside the onComplete callback. So your only calling player.playVideo() when you need to. You should first get comfortable with the YouTube Iframe Player API. Create a test page with buttons, and attach the playback controls for pause play, stop, etc. And then try and integrate into your animation

 

This really isnt a GSAP API question, but here you go...

 

A working example that plays the video when the animation onComplete callback fires using YouTube Iframe Player API

 

See the Pen NbWPWB by jonathan (@jonathan) on CodePen

 

Just a fast example.. Happy Tweening