Trouble with iframe and back button

[Zonglars]

(Not sure if this is the right section, but since it's probably a javascript solution)

Alright, my video pages (example here) use an iframe that links to a lightweight page with some code for a flash video player.
Code:

HTML: Select all

<object type="application/x-shockwave-flash" width="400" height="350" id="videoaudioicon" style="margin: 0px auto;" data="http://pyramidia.webs.com/Flash/PyramidiaPlayer.swf?vidFile=BMV01.flv">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="http://pyramidia.webs.com/Flash/PyramidiaPlayer.swf?vidFile=BMV01.flv" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>

When you click a thumbnail (feel free to recommend alternate designs for that), it triggers some simple javascript that changes the title and description displayed, as well as the URL of the iframe.
Code

HTML: Select all

<script type="text/javascript">
<!--
function changeStuff(title,bio,vidurl,url)
{
document.getElementById('vidTitle').innerHTML=title;
document.getElementById('vidBio').innerHTML=bio;
document.getElementById('vidLink').href=url;
document.getElementById('vidFrame').src="BMVs/" + vidurl;
}
//-->
</script>

<!--Details, iFrame, and Direct Link-->
<div id="details">
<b>Title:</b> <span id="vidTitle">&quot;Keep Holding On&quot; by Avril Lavigne</span><br>
<b>Description:</b> <span id="vidBio">My 15th and, for the moment, last BMV, has a nice finale feel to it eh? Put more effort in syncing it this time.</span><br>
</div>
<div id="video">
<iframe id="vidFrame" name="vidFrame" src="BMVs/bmv15.html" frameborder=0 scrolling="no" width="400px" height="350px" marginheight="0px" marginwidth="0px"></iframe></div>
<b><a id="vidLink" href="http://pyramidia.webs.com/Flash/PyramidiaPlayer.swf?vidFile=BMV15.flv" onclick="window.open(this.href);return false;" style="text-decoration: none;">D<small>IRECT</small> L<small>INK</small></a></b>

<!--Nav Button Code-->
<a href="javascript:void();" onclick="changeStuff('&quot;Hero&quot; by AIK',
'My version of the one made on Bionicle.com, this is like what, version 6?',
'bmv01.html',
'http://pyramidia.webs.com/Flash/PyramidiaPlayer.swf?vidFile=BMV01.flv')">
<img src="VidThumbs/hero.jpg" title="&quot;Hero&quot; by AIK" alt="&quot;Hero&quot;" width=65 height=49></a>

It works perfectly, though my one problem is that when you hit back on the browser after watching a few videos, it goes back in the iframe's history before the main page's history.

So I need one of two solutions:

1) how to make the browser ignore the iframe's history (or something to avoid the above problem)

2) how to use JS to change the src of the object and the value in <param name="movie" value="">, which i've tried before but i'm not that addept in DOM.