Iframe content not responding to wmode in IE

Question

I have a Bootstrap project where I include a video on a click event. Loading the video works fine across all browsers, but no matter what I do, I can't get the iframe content to display below the rest of the site content in IE (even the latest version). I have searched everywhere and tried every variation of wmode=opaque or transparent, but nothing seems to work.

Any help would be greatly appreciated - thanks!

Here is the 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");
    });

Answer 1

For future reference, putting the 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");
});