Magento: Show Vimeo or Youtube Video in Lightbox Popup on CMS Page

June 20, 2012

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.

jQuery Lightboxes General Settings

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'
});
jQuery Lightboxes JS Settings

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>

{ 3 comments… read them below or add one }

omar August 6, 2012 at 5:12 pm

I used this for the footer links, which appear on every page but on the homepage the links do not open in a lightbox?? Why do the light boxes work on all my cms pages but not on the home page!? PLEASE HELP QUICK

Thank you
LEDCityUSA.com

**You can see the footer link open in a lightbox on every page but not on the homepage. Why?

Rodrigo November 18, 2013 at 11:19 am

Works Great in Magento 1.7!
Thanks!

C133 November 20, 2013 at 3:49 pm

Awesome, you’re welcome!

Leave a Comment

Previous post:

Next post: