The name of the page doesn’t matter… just change it to the same in all instances. You don’t need to make a list but each reference id needs to be unique in the call url #video1, #video2 etc and have a matching id , e.g. <div id="video1" class="modalDialog">
In each of these divisions you define the popup as you like. If you wish to have the video title in the h2 tags you could do that or remove h2 tags. I would put the video player code in the wrapper <div class="modalinnerwrapper"> with whatever video is to play, e.g. Fork at 57km.mp4 or whatever.
So going with info I have it would be like this
<div id="apDiv3"><a href="modaltestpage.html#Forkat57" onmouseover="MM_swapImage('fork 57','','fork 57.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Rollover blankBL.png" alt="Fork at 5.7 Km stay right" width="400" height="225" id="fork 57" /></a></div>
<div id="Forkat57" class="modalDialog">
<div>
<a href="modaltestpage.html" title="Close" class="close">X</a>
<h2>Fork at 57</h2>
<div class="modalinnerwrapper">
video player goes here playing Fork at 57km.mp4
</div>
</div>
</div>
Also note that the links section and modalDialog div’s don’t need to be in the same section as in my first example. So your “map” links section doesn’t need to change much besides changing the links and removing target. The modalDialog div’s can be defined in a different part of the page after displayed content. Using original example.
<div id="apDiv1"><a href="modaltestpage.html#viewvideo1">Video One</a></div>
<div id="apDiv2"><a href="modaltestpage.html#viewvideo2">Video Two</a></div>
more page content
<div id="viewvideo1" class="modalDialog">
<div>
<a href="modaltestpage.html" title="Close" class="close">X</a>
<h2>Viewing Video One</h2>
<div class="modalinnerwrapper">
My video One plays here
</div>
</div>
</div>
<div id="viewvideo2" class="modalDialog">
<div>
<a href="modaltestpage.html" title="Close" class="close">X</a>
<h2>Viewing Video Two</h2>
<div class="modalinnerwrapper">
My video Two plays here
</div>
</div>
</div>