It depends upon how much work you want to do now vs how much work you want to do later. It also depends upon whether or not you anticipate having PHP available for the other sites you are contemplating doing a similar sort of thing on. Other factors may or may not be involved.
The easiest "just slap it on" solution would be to use javascript. Even that would be a bit involved and might need tweaking once it's in place to tailor it to your needs.
I should mention that your video need not depend upon javascript. The swfobject.js script you are using already has a non-javascript fall back, for example (on Animations/ES_Gears.html) it's:
<div id='mediaspace'>
<br>
Sorry but the video content was unable to load.<p>
This is typically due to one of 2 things:<p>
:: You didn't allow 'ActiveX' controls. This is needed for the Javascript to run.<br>
:: You don't have flash installed. You can download it <a href="http://get.adobe.com/flashplayer/" target="blank">Here</a> </div>
I know that's primarily for if the browser can't do Flash, but it's what non-javascript users see as well. It could be modified so as to still show the Flash if possible, even when javascript is unavailable. Or it could at least include some language about requiring javascript enabled. It's also (though not entirely incorrect) a little accusatory and a bit misleading.
Whatever you decide to do about that, the entire page and the many like it could all be generated by a single PHP page to which could be fed a few key parameters, probably in the form of a get. Or one parameter as get that would instruct it to get others from a text file or database. Even without that, one parameter might be all that is required. That depends upon how much the various videos share in common as far as layout, etc.
Getting back to your question, I see that on EffinScience.html there already is:
<SCRIPT LANGUAGE="JavaScript">
<!--
if (parent.location.href.indexOf("index.html") == -1)
top.location.href = "index.html"
// -->
</SCRIPT>
to load index.html if this page is navigated to by itself. That's probably not the best way to do that, I'd go for:
<script type="text/javascript">
(function(){
var lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))$');
if (!lre.test(parent.location.href)){
top.location.href = '/';
}
})();
</script>
Now if you want to add a query string to get the iframe on index.html to load this page, do it like (this script without modification can go on any page on the same domain that you want to have receive this treatment, it may be an external script):
<script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Notice the red 0, that's the iframe we are targeting on the index page. Iframes on a page are numbered from 0 to however many that there are. In this case you have only one I think, so 0 should be fine.
Then on index.html put this script just before the closing </body> tag (it may be external, but still must go right before the closing </body> tag):
<script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Notes:
This will probably not work in local testing in some browsers.
This last script can go on any page that you want to have load an iframe from a frame and src parameter in the query string. The frame parameter (0 in this case) indicates the first iframe on the page. Only pages from the same domain allowed.
Of course, this is a javascript only solution and may need tweaking.