Problem with displaying a video <iframe> in a lightbox

Hello everybody,

I'm trying to use jQuery for displaying a youtube video in a lightbox, like we've learned in this course with an image gallery.

I already created the following code:

<div class="vt vt-claudia">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/m4-uEa7tr4A?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

<div>
<p class="btn-play play-claudia">Play Video</p>
</div>

var $overlay = jQuery('<div id="overlay"></div>');
jQuery("body").append($overlay);

$overlay.append(".vt");

jQuery(".vt").hide();

jQuery(".play-claudia").click(function () {
    $overlay.show();
    jQuery(".vt-claudia").show();
});

So here's what's happening right now:

When clicking on ".play-claudia" it shows the overlay and it also shows the video ".vt-claudia". But the video is "behind" the overlay.

My Problem is how to append ".vt-claudia" to the var $overlay, so that the video will be displayed in a lightbox?

I already tried to append the ".vt-claudia" to the var $overlay, but getting the same result. I do have more <iframe> videos to play on the same site, so this is why I'm not appending <iframe> to the var $overlay.

Thanks for your help! best, Anke :-)