JQModal showing over iframe and use of ?wmode=opaque

Question

here's a good one...

Site with JQModal, everything works except that the iframe sits on top of the modal.

The easy fix is to add ?wmode=opaque to the end of the youtube link but that breaks my javascript that starts the video when the model closes.

Ideas?

Here's teh relevant code:

HTML:

  <div>
     <iframe id='youTube_video' width="1060" height="597" src="//www.youtube.com/embed/io78hmjAWHw" frameborder="0" allowfullscreen></iframe>
  </div>

Javascript:

jQuery(function($){
$('#my-modal').jqm({
    overlayClass: 'jqm-overlay',
    closeClass: 'jqm-close',
    onHide: function(hash){
        $('#youTube_video').attr('src', $('#youTube_video').attr('src')+ '?autoplay=1');
        hash.w.fadeOut('2000', function() {hash.o.remove();});
    }

})
$('#my-modal').jqmShow()
});

As you can see, when user clicks on the page, the modal closes and the video starts. Without the ?wmode=opaque the iframe is in front. If I add ?wmode=opaque to the html URL, it breaks the video start script.

Ideas?

Answer 1

What's wrong on doing it this way?

$('#youTube_video').attr('src', $('#youTube_video').attr('src')+ '?autoplay=1&wmode=opaque');