Ultimately my aim is to have a small video playing muted on my website and then when the user hovers over it it opens up in a Lightbox and plays with sound. The hover function I'll get to after but right now I just can't seem to get the local video (mp4 & webm) to play in a Lightbox. I have tried FancyBox and LightBox and the one that is closest to working is (very simple html page);
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript" src="froogaloop2.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="html5lightbox.js"></script>
</head>
<body>
<a href="websiteintro.mp4" class="html5lightbox" title="web">IMage</a>
<a href="websiteintro.webm" class="html5lightbox" title="web">image mp4</a>
</body>
</html>
Lightbox was downloaded from https://html5box.com/html5lightbox/ and installation instructions followed from https://html5box.com/html5lightbox/index.php#quickinstallation
Upon clicking the link the lightbox opens but nothing plays, it's just a grey background. My videos are in the same folder as the html page hence no path to file so that shouldn't be the problem. I'm thinking there may be a certain class I need to use because it's a video but I can't find the solution anywhere. It's probably a really easy fix I just can't find it, help please!