Making videos available to visitors to your website is crucial for user engagement; people typically enjoy watching videos more than reading walls of text, so including videos on your website can do much for user interaction and sales.  There are many Magento tutorials on adding lightbox video galleries to products; however, if you are trying to add a lightbox popup video to a CMS or category page, there is a paucity of information, so we’ve endeavored to provide a tutorial for doing so.

The below steps detail how to implement a lightbox-style video on a Magento CMS page (tested in Magento v1.6.1.0) using jQuery (parts of the instructions are adapted from here and here):

1)  Install MagePyscho’s jQuery Lightboxes (FancyBox, PiroBox etc.) extension via Magento Connect.

2) After installation go to: Admin > System > Configuration > MagePsycho Extensions > jQuery LightBoxes to manage your settings. Example:

General Settings
Enabled = Yes
Lightbox Type = Fancybox
Main Image Size = Default: 265×265
Thumbnail Size = Default: 57×57
Popup Image Size = Default: full size
Disable Zoom Bar = Yes
Include Main Image In ‘More Views’ Lightbox Gallery = Yes
More Views Label = More Views

JS File Settings
Include jQuery file = Yes
Include jQuery file in = Head
Include lightbox files in = Head
Include Lightbox files globally = No
Lightbox initialization code for global usage=paste the initialization code here (only enabled if above option = Yes)
Include lightbox initialization code in = Media

FancyBox
Fancybox settings goes here…

Pirobox
Pirobox settings goes here…

Pirobox Extended
Pirobox Extended settings goes here…

prettyPhoto
prettyPhoto settings goes here…

Lightbox Clone
Lightbox Clone settings goes here…

Important Notes:
– Disable the Cache(System > Cache Management) , Compilation(System > Tools > Compilation)
– If you get ‘Access Denied’ error in System > Configuration, then try to logout & re-login.
– If you have custom theme then copy the following files:

app/design/frontend/default/default/layout/lightboxes.xml
app/design/frontend/default/default/template/lightboxes/*

to

app/design/frontend/[your-interface]/[your-theme]/layout/lightboxes.xml
app/design/frontend/[your-interface]/[your-theme]/template/lightboxes/*

3) Now the settings need to be tweaked a bit for displaying videos on CMS pages as shown below:

General Settings:
Enabled = Yes
Lightbox Type = Choose the lightbox type of your choice. We have chosen Fancybox for example.

Use the general settings shown above for this step

JS File Settings
Include jQuery file in = Head
Include Lightbox files in = Head
Include Lightbox files globally = Yes
Lightbox initialization code for global usage = Insert jQuery initialization code here. You can add any initialization code that you’d like here. We have used the following code:

jQuery("a[rel=iframeLink]").fancybox({
'type' : 'iframe',
'width' : 800,
'height' : 600
});

jQuery("a[rel=imageGallery]").fancybox({
'titleShow' : 1,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});

Use the above JS settings for this step

4) Set up the CMS page. Include this code at the top:

<!-- FancyBox-->
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
jQuery("a[rel=fancybox]").fancybox({

});

});
// ]]>
</script>
<!-- FancyBox-->

For Vimeo, use the below code wherever you want the video to show (it has a long URL in it, so use the View Source option in the upper right corner of the frame to grab it):

<a rel="iframeLink" href="http://vimeo.com/moogaloop.swf?clip_id=YOUR_VIMEO_ID&amp;amp;amp;amp;amp;force_embed=1&amp;amp;amp;amp;amp;server=vimeo.com&amp;amp;amp;amp;amp;show_title=0&amp;amp;amp;amp;amp;show_byline=0&amp;amp;amp;amp;amp;show_portrait=0&amp;amp;amp;amp;amp;color=00adef&amp;amp;amp;amp;amp;fullscreen=1&amp;amp;amp;amp;amp;autoplay=0&amp;amp;amp;amp;amp;loop=0">
<img src="http://www.YOUR_DOMAIN.com/PATH_TO_THE_THUMBNAIL_FOR_THE_VIDEO"></a>

For YouTube, use this code:

<a rel="iframeLink" href=http://www.youtube.com/v/YOUR_VIDEO_ID?version=3&amp;amp;amp;amp;hl=en_US&amp;amp;amp;amp;rel=0">
<img src="http://www.YOUR_DOMAIN.com/PATH_TO_THE_THUMBNAIL_FOR_THE_VIDEO"></a>