A friend wrote me today and asked:

I have a cfwindow that embeds YouTube content. The problem is that when you close the window the content keeps playing. Is there a way to unload the embedded content?

I immediately had two thoughts on how to handle this issue. My first thought was to use the often overlooked 'ColdFusion.Window.destroy()' attached to a hide listener for the window. Doing this would essentially remote the contents of the window when it is hidden. However, something about that method just didn't feel right to me. My second thought was that there had to be a JavaScript API to interact with YouTube videos. After a quick search, I found it. Before I get into the code, take a look at my demo. The first window is created via JavaScript when you click the 'Show Win One' link. I attach a hide listener when the window is created that destroys the window. As I said it just felt a bit dirty to handle it this way. Plus, as you'll see in Firebug there is an Ajax call with each show of the window. It's not a horrible solution I guess, but I still prefer the second method. The second window is actually created on load of the page itself, where I also attach a hide listener. But in the case of the second window I use the YouTube JS API to interact with the window. Here is the code that creates both windows and attaches the listeners. Note that the init() function is called later on with the ajaxOnLoad() function. Here are is the hide listener for the first window: Note the second argument that I used to indicate that the HTML element associated with the window should also be destroyed. So as I said, this method works. You open the window, play the video, and close the window which destroys the HTML contents and effectively stops the video. When the window is re-opened it fetches the content again and the whole fun cycle begins again. The second handler is pretty straightforward too: So here I just grab the HTML element of the embed tag and then call pauseVideo() on the element. See the JS API documentation linked above for all the other methods that the player exposes. There are tons of them. So here you open the window that was created one time (on load of the page), play the video, close the window (which pauses the video). When you reopen this window the video is shown in it's paused state and you can resume playing. Depending on your project needs you could have stopped the video, load a new video on show, etc. I should point out that there are a few modifications to the raw YouTube embed code that are necessary to interact with the API. Here is the code in the template that I used for the second window contents. Comments should explain what is going on here. Oh...I should also mention. If you haven't watched the video straight through yet, you really should! And visit the link in the header of the windows. Full example code is attached.