jquery - Iframe content not responding to wmode in IE -

i have bootstrap project include video on click event. loading video works fine across browsers, no matter do, can't iframe content display below rest of site content in ie (even latest version). have searched everywhere , tried every variation of wmode=opaque or transparent, nothing seems work.

any appreciated - thanks!

here code: html:

<div class="video-container" data-url="https://www.youtube.com/embed/opf0ybxqdm0">             <img class="posterframe" src="img/video-poster-frame.gif" alt="video placeholder image" />           </div> 

jquery:

var videos  = $(".video-container");     videos.bind("click", function(){         var url = $(this).data('url');         var elm = $(this),                        ifr     = '<iframe width="100%" height="357" frameborder="0" allowfullscreen src="' + url + '?wmode=opaque?rel=0&autoplay=1"></iframe>';         elm.addclass("player").html(ifr);         elm.off("click");     }); 

for future reference, putting updated jquery code snippet.

$(".video-container").bind("click", function(){     var url = $(this).data('url');     var elm = $(this),                    ifr     = '<iframe width="100%" height="357" frameborder="0" allowfullscreen src="' + url + '?wmode=opaque&rel=0&autoplay=1"></iframe>';     elm.addclass("player").html(ifr);     elm.off("click"); });