-
☆ A M B ☆
- 24,524 Posts
Any popup will work with MODx, it's just a matter of setting up the Javascript. MODx doesn't put any restrictions on what Javascript you want, all you need to do is make sure that MODx is generating the HTML code that your selected Javascript expects.
In the case of the Video Lightbox desktop app, just copy the relevant section from the HTML the application generates into a chunk, then use the chunk wherever you want it. Make sure your paths for the videos, the images and the javascript are correct for your MODx installation. I've used this or something like it a few times with no trouble.
<!-- Start VideoLightBox.com BODY section -->
<div class="videogallery">
<a class="voverlay" href="http://www.youtube.com/v/xLgnkRxlKCg?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="The Hobbit 2 Trailer 2013 The Desolation of Smaug - Official Movie Teaser [HD]"><img src="img/demo/modern/thumbnails/0.png" alt="The Hobbit 2 Trailer 2013 The Desolation of Smaug - Official Movie Teaser [HD]" /><span></span></a>
<a class="voverlay" href="http://www.youtube.com/v/SNxhqoKT1oc?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="Elysium - Official Trailer (2013) [HD] - Matt Damon Sci-Fi Movie"><img src="img/demo/modern/thumbnails/1.png" alt="Elysium - Official Trailer (2013) [HD] - Matt Damon Sci-Fi Movie" /><span></span></a>
<a class="voverlay" href="http://www.youtube.com/v/4axPibsp4Ao?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="The Mortal Instruments: City of Bones Trailer 2013 Movie - Official [HD]"><img src="img/demo/modern/thumbnails/2.png" alt="The Mortal Instruments: City of Bones Trailer 2013 Movie - Official [HD]" /><span></span></a>
<a class="voverlay" href="http://www.youtube.com/v/PH-n39PCXp8?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="The Hunger Games: Catching Fire Trailer 2013 - Official [HD]"><img src="img/demo/modern/thumbnails/3.png" alt="The Hunger Games: Catching Fire Trailer 2013 - Official [HD]" /><span></span></a>
<a class="voverlay" href="http://www.youtube.com/v/7kuzDvSIdjU?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="Avatar 2 Official Trailer (2014-2015)"><img src="img/demo/modern/thumbnails/4.png" alt="Avatar 2 Official Trailer (2014-2015)" /><span></span></a>
<a class="voverlay" href="http://www.youtube.com/v/SjUU-3535hQ?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" title="THE AVENGERS 2 Trailer - (OFFICIAL)"><img src="img/demo/modern/thumbnails/5.png" alt="THE AVENGERS 2 Trailer - (OFFICIAL)" /><span></span></a><span class="videolb"><a href="http://videolightbox.com">Lightbox Video Plugin</a> by VideoLightBox.com v2.5</span>
</div>
<script src="img/demo/modern/jquery.tools.min.js" type="text/javascript"></script>
<script src="img/demo/modern/videolightbox.js" type="text/javascript"></script>
<!-- End VideoLightBox.com BODY section -->
-
☆ A M B ☆
- 476 Posts
I'll second what Susan said above. This is not a MODX plugin per se you're looking for, but rather taking any JS that already handles this functionality and integrating the code into your template. I personally like the Colorbox jQuery tool for creating modal windows which display Youtube videos:
http://www.jacklmoore.com/colorbox/
Here are examples here:
http://www.jacklmoore.com/colorbox/example1/
Precision Web Development ... SmashStack.com
