jquery - Youtube video ends fade out -

jquery - Youtube video ends fade out -

i trying create youtube video api frame fade out after playing, can't work. worked while ago, must have done script mess up.

i have tried document.getelementbyid("video").style.display = "none"; aswell, , doesn't work. want create fade out.

<div id="player"></div> <script> var tag = document.createelement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname('script')[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag); var player; function onyoutubeiframeapiready() { player = new yt.player('player', { height: '480', width: '853', videoid: '7u-liw-xre4', playervars: { 'autoplay': 1, 'showinfo': 0, 'controls': 0, 'rel' : 0 } }); } function onplayerready(event) { event.target.playvideo(); } var done = false; function onplayerstatechange(event) { if(event.data === yt.playerstate.ended) { stopvideo(); } } function stopvideo() { player.stopvideo(); document.getelementbyid("video").fadeout(); } </script>

what looking event send yt api when video has ended. you're giving command end video. 2 different things. seek this:

function onplayerstatechange(event) { if (event.data == yt.playerstate.playing) { console.log('awesome video playing'); } if (event.data == yt.playerstate.ended) { jquery('your element').fadeto('fast', 0).hide(); } }

and i'd advise not mix javascript , jquery styling in code can confusing.

jquery youtube youtube-api