Issue with JavaScript, Replacing an iframe's src, and the back button
<p>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:</p>

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

<p>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.</p>

<p>Here is my process leading to my problem:</p>

<ol>
<li>I click on the thumbnail and the
video pops off and starts playing.</li>
<li>I close the popped off content.</li>
<li>I press the back button. </li>
<li>The video I popped off previously is playing in the background. (The Problem)</li>
</ol>

<p>Here is what I know of the process that is happening:</p>

<ul>
<li>The page that is being viewed has 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)</li>
<li>When I leave the popped off content
open and press the back button I see 
just an empty iframe.</li>
</ul>

<p>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. </p>

<p>My question(s):</p>

<ul>
<li>Can this issue be resolved with
JavaScript?</li>
<li>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. </li>
</ul>
