Play and Stop a YouTube Video In TimeLineLite Animation

[celli]

Hi,

 

With timelineLite I have created an animation, then I have a YouTube video that will play on autoPlay via iFrame. I would like to then detect when the video has stopped, and fade-out the video iFrame and continue with another animation... Is there a way to do this ?

 

I also wanted to detect when my browser has reached a certain width, similar to a css media query, and pause or stop the video. Is this also possible ?

[Diaco]

Hi

 

you should use Youtube Api ; pls check this out :

 

https://developers.google.com/youtube/js_api_reference?csw=1#Events

 

http://css-tricks.com/play-button-youtube-and-vimeo-api/

 

http://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html

 

http://stackoverflow.com/questions/12522291/pausing-youtube-iframe-api-in-javascript

[Jonathan]

Nice answer AncientWarrior .. it got me thinking..

 

Here is JS polyfill that allows you to wrap the YouTube API in an HTML5 Media API wrapper, so that it can be programmed against as if it was true HTML5 <video>.

 

Add the normal files for jQuery MediaElement.js.

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />

::

Add the YouTube video as a <source>

<video width="640" height="360" id="player1" preload="none">
	<source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>

:

Then you can control the <video> using the HTML5 video API with MediaElements

 

Resource:

http://mediaelementjs.com/examples/?name=youtube

 

I hope this helps