jQuery detach div, append div

Question

In Chrome/Safari the Vimeo video continues to play in the background once the the lightbox has been closed. At this point the "detach" works to stop the video but when you close the lightbox and click on a menu item to re-open the video the video div is blank. I've tried "clone" and "append" and can't get the video back in.

Website Function: Click "a" "b" "c" and the lightbox appears with the video. Click the "X" in the lightbox the and the lightbox contents close.

    HTML/CSS 
    a id="alphaa" <------ The  a, b, c menu item, when clicked, open the lightbox
    .abcbox_content <------- The div that holds all the content for the lightbox
    #videowrapper <------ div that holds the Vimeo iframe
    .abc-align-right <---- the "X" to close the lightbox

and here's the jQuery I have so far.

    <script type="text/javascript">
    $(document).ready(function(){
    $(".abc-align-right").click(function() {
    $("#videowrapper").clone(true); 
    $("#videowrapper").contents().detach();
    if ($(".abcbox_content").is(':visible'))
    $("#videowrapper").append();
    }); });
    </script>

Thanks for any help

Answer 1

It looks like you are cloning the element, but not using the clone. Try this:

<script type="text/javascript">
    $(document).ready(function(){
    $(".abc-align-right").click(function() {

        $("#videowrapper").replaceWith($("#videowrapper").clone(true)); 

    });
    </script>