I can give snippets to help point you in the right direction... Can't give all due to IP...
Basically, Rich Text field which makes a button with Launch as a class... gives the record ID as a dataset paramater
JS Code page with event handler for a.Launch...
API call to get the File URL:
API_DoQuery&clist=a&query={'3'.EX.'<record ID>'}&fmt=structured
the fmt=structured gives the properties of the fields, not just the data... the file attachment fields will have a child element of "url" this is the link for the file attachment.
var file = (Request.responseXML.documentElement.getElementsByTagName("url"))[0].innerHTML;
var extension = file.substring(file.lastIndexOf('.')+1, file.length);
I'm then able to add html code based on extension of the file...
Eample:
if(extension === "mp4"){document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><video id="VideoLauncher" width="600" controls controlsList="nodownload"><source src="'+file+' " type="video/mp4"><!--Browser does not support <video> tag --></video></div><div id="fade" onClick="lightbox_close();"></div>'}
With the elements now created, add CSS to get them how you wish... I have these set to display:none as default...
Then function to actually show elements:
function lightbox_open() { var lightBoxVideo = document.getElementById("VideoLauncher"); window.scrollTo(0, 0); document.getElementById('light').style.display = 'block'; document.getElementById('fade').style.display = 'block'; try{lightBoxVideo.play();}catch{}}
And have another function for lightbox_close() to handle getting out of the pop up view...