A Pen by Luke.

index.html

<button id='vidopen'>Open Video Dialog</button>

<div id='video' title='WowCraft Episode 12 How to Quest'>
  <iframe width="560" height="315" src="//www.youtube.com/embed/ILxX0ALpWoM?rel=0" frameborder="0" allowfullscreen></iframe>  
</div>

script.js

$('#vidopen').click(function () {
  $('#video').dialog({
    width: 610,
    height: 390,
    draggable: true
  });
  $('#video').bind('dialogclose', function(event) {
    replace_content('#video');
  });				
  return false;
});

function replace_content(id) {
  var video = $(id).html();
  $(id).html("");
  $(id).html(video);
}

style.css

button {
  padding:20px 40px;
}
#video {
  display:none;
  text-align:center;
}

Youtube-Video-in-Modal-Dialog-stops-when-closed.markdown

Youtube Video in Modal/Dialog stops when closed

So the issue with modals/dialog and iframe videos / youtube embeds is that they keep playing in the background. This stops the playback when the dialog is closed. No More video playing in the background.

A Pen by Luke on CodePen.

License.