0

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!

Python Noob
  • 39
  • 1
  • 7

1 Answers1

0

Found the answer - Completely slipped my mind to just inspect element. Just in case anybody else stumbles upon this when developing a website, it was as easy as I thought...well for webm files anyway. I literally just changed a line to <a href="websiteintro.webm" data-webm="websiteintro.webm" class="html5lightbox" title="web">image mp4</a>

Unfortunately data-mp4 doesn't work for mp4's still but webm's will do for now

Python Noob
  • 39
  • 1
  • 7