Question

I have written some code to display a YouTube video on my page but I want it to be like Lightbox. So I have created the following div:

<div id="video-background" class="vid_back" ></div>

and I have a jQuery function to append YouTube video:

 $("#video_one").click(function () {

            $("#video-background").append("<div id=\"video_player_box\"><div id=\"close\" >X</div><iframe title=\"YouTube video player\" class=\"youtube-player\" type=\"text/html\" " +
            "width=\"640\" height=\"390\" src=\"" + vid_one + "\" frameborder=\"0\" allowFullScreen></iframe></div>");

            state = 1;
        });

While there is no problem until here, I want to close this thing when they click the “X”. To implement this I did:

 $(document).ready(function () {
    $("#close").live("click", function(){ 
      $("#video-background").remove("div"); 

    });
  });

While this works, when I click again the link to show the video, nothing happens.

What am I missing?

Answer 1

Maybe this fiddle helps you out.

http://jsfiddle.net/uwULw/