JS Animated. How to replace an image with video using Fancybox

This tutorial is going to show you how to replace an image with video using Fancybox in JS Animated templates.

Fancybox allows you to open video in a lightbox.

Please open the .html file with the image you would like to edit. To add video to Fancybox, follow the steps below:

YouTube video

1. Initialize the video gallery: add code to your .html file right before the closing </script> tag:

   jQuery(document).ready(function() {
       
       $(".video").click(function() {
       $.fancybox({
       'padding'		: 0,
       'autoScale'		: false,
       'transitionIn'	: 'none',
       'transitionOut'	: 'none',
       'title'			: this.title,
       'width'			: 640,
       'height'		: 385,
       'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
       'type'			: 'swf',
       'swf'			: {
       'wmode'				: 'transparent',
       'allowfullscreen'	: 'true'
       }
       });
       
       return false;
       });
       });

   You can change video height, width, type, etc. in the code above.

2. Find the line with the image, e.g.:

   <a href="img/gall_1_big2.jpg"><img src="img/gall_1_pic2.jpg" alt="" class="img-polaroid"></a>

3. And change it to:

   <a class="video" title="" href="http://link_for_youtube_video_here"><img src="img/gall_1_pic2.jpg" alt="" class="img-polaroid"></a>

   Where http://link_for_youtube_video_here is a link to Youtube video. To find out video URL, open video on YouTube, right-click on video and select Get video URL.

Embedding video file

1. Initialize the video gallery following the 1st step from previous section.

2. Find the code for the image you would like to change in .html file:

   <a href="img/gall_1_big2.jpg"><img src="img/gall_1_pic2.jpg" alt="" class="img-polaroid"></a>

3. Replace it with:

   <a class="video"  title="" href="img/video/video.swf"><img src="img/gall_1_pic1.jpg" alt="" class="img-polaroid"></a>

   Where img/video/video.swf is the path for your image.

4. Upload your video file to the images/video folder on your server.

5. Refresh your site to see the changes.

Feel free to check the detailed video tutorial below: