javascript - Can't make Youtube video in modal stop playing in IE and Chrome -
i have set of modals has different youtube video in each. i've added code reset src of video every time modal closed, work in firefox, not in ie or chrome. i've tried few different codes, can make work in firefox nomatter try.
javascript:
function close_modal(){ //hide mask $('#mask').fadeout(500); //hide modal window(s) $('.modal_window').fadeout(500); //enable scoll on main page $('body').removeclass('stop-scrolling') var video = $("#currentvideo").attr("src"); $("#currentvideo").attr("src",""); $("#currentvideo").attr("src",video); } function show_modal(modal_id){ //disable scroll on main page $('body').addclass('stop-scrolling') //set display block , opacity 0 can use fadeto $('#mask').css({ 'display' : 'block', opacity : 0}); //fade in mask opacity 0.8 $('#mask').fadeto(500,0.8); //show modal window $('#'+modal_id).fadein(500); }
modal html:
<div id='jensvoigtmodal' class='modal_window'> <h3>jens voigt</h3> <p>(born 17 september 1971) german professional road bicycle racer uci proteam trek factory racing. voigt known propensity attack, , positive racing attitude.<br /> <br /> capable of repeated attacking, holding high tempo, , breaking away peloton. has worn yellow jersey of tour de france twice, though has never challenged overall title due lack of ability in mountains. in cycling folklore, considered 1 of best rouleur riders day.<br /> <br />voigt popular cycling fans, both aggressive riding style , affable, forthright , articulate style in dealing public , media.<br /> <center> <iframe id="currentvideo" width="600" height="338" src="http://www.youtube.com/embed/_zeu4mpatpa?wmode=opaque&html5=1&rel=0" frameborder="0" allowfullscreen></iframe> </center> <br /> read more jens voigt on trek factory racing homepage: <a href="http://www.trekfactoryracing.com/team/riders/jens-voigt" id="pagelink" target="_blank">”jens voigt”</a> </p> </div>
is there way make work in ie , chrome without using youtube api? appreciated.
why not use youtube api
change original src of iframe
http://www.youtube.com/embed/_zeu4mpatpa?wmode=opaque&html5=1&rel=0&enablejsapi=1
note &enablejsapi=1 added end.
then in script file add call youtube api below
var tag = document.createelement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstscripttag = document.getelementsbytagname('script')[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag);
create player instance
this may daunting simple when head around it.
var player; function onyoutubeiframeapiready() { player = new yt.player('currentvideo', { }); }
the var player used reference video functions. , currentvideo id of iframe.
and can stop player using
player.stopvideo()
okay it's still not quite simple should it's reliable way
Comments
Post a Comment