YouTube JavaScript API - play not fired when player hidden -


i'm controlling youtube iframe player via yt api. works fine on normal cases, in process, there state when player must display:none; after show player again display:block; works fine except doesn't fire usual events.

http://jsfiddle.net/wdduw/

test case:

  1. start video normal play button on player - play start event fired
  2. stop video the button below, make .stopvideo(); , hide parent element of youtube iframe.
  3. click on show button, set display:block; again
  4. start video again play control, there won't event youtube player anymore.

do know way solve problem? (do not hide video's parent element not option :( )

<div>     <div id="test" style="width: 300px; height: 200px;"></div> </div> <button id="stop">stop</button> <button id="show">show</button> <br /> <textarea id="console" style="height: 500px;"></textarea> 

js:

var vars = {     enablejsapi: 1,     origin: window.location.protocol + "//" + window.location.host,     autoplay: 0,     theme: 'dark',     modestbranding: 1,     wmode: "opaque",     rel: 0,     vq: 'default' }; var c = $('#console'); var tag = document.createelement("script"); tag.src = "//www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname("script")[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag); window.onyoutubeiframeapiready = function () {     var player = $("#test"),         playercontainer = player.parent();     playerobj = new yt.player(player.attr("id"), {         videoid: '0_afsnb8e5y',         wmode: 'opaque',         playervars: vars,         events: {             onstatechange: function (state) {                 switch (state.data) {                     case yt.playerstate.playing:                         c.val("play started\n" + c.val());                         break;                         //case yt.playerstate.paused:                     case yt.playerstate.ended:                         c.val("play ended\n" + c.val());                         break;                 }             }         }     });     $('#stop').click(function () {         playerobj.stopvideo();         playercontainer.css('display', 'none');     });     $('#show').click(function () {         playercontainer.css('display', 'block');         playerobj.addeventlistener('onstatechange', 'test');     }); } 


Comments

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -