Issue with JavaScript, Replacing an iframe's src, and the back button

I am working on a pop out for videos on a website I am doing some development work for. The idea is to click on a thumbnail of the video and then the video pop's off the page. Like how facebook works with their image viewer. I currently have a div tag with it's CSS display attribute set to hidden and an iframe with no src. When a user clicks on the thumbnail for the video I have JavaScript load the appropriate youtube embed link into iframe by this method:

document.getElementById('iframe-id').src = "http://www.youtube.com/embed/(videoID)";

The video is set to automatically start playing. When a user exits the popped off content the src of the iframe is then set to "" by the same method. It works fine, and the video is no longer in the iframe. The issue is with the back button.

Here is my process leading to my problem:

1. I click on the thumbnail and the video pops off and starts playing.
2. I close the popped off content.
3. I press the back button.
4. The video I popped off previously is playing in the background. (The Problem)

Here is what I know of the process that is happening:

• The page that is being viewed ha开发者_开发知识库s two instances created back to back in the history of a browser. (ie I press the back button and I am on the same page still.. this is also when the video starts playing in particular browsers)
• When I leave the popped off content open and press the back button I see just an empty iframe.

I believe my issue lies in the fact that I am changing the src to the iframe. The process of that seems to be causing the browser to load the page again and create a second instance of the same page in the history (where reloading a page does not). When the back button is pressed the page goes to the previous instance, but depending on the browser the hidden iframe is not always empty and the video is playing.

My question(s):

• Can this issue be resolved with JavaScript?
• If it can't what could accomplish the task I am trying with out the issue creating two seperate instances of the same page? I was thinking AJAX might be the solution, but I don't know. I am still a little new to this all.

This can be resolved within javascript.

Additionally, AJAX has nothing to do with the problem you're having. AJAX is a mechanism for moving data around, not manipulating HTML documents.

If you just need to display a video, you don't need to use an iframe to do so. I'd suggest keeping a hidden div somewhere on the page and use that as a container for your video pop-up. When you need to display a video, insert whatever HTML you need to get it working into the div and display it when it's ready.