Categories

Featured templates

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

Ammy Brown April 20, 2015
Rating: 5.0. From 1 vote.
Please wait...

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

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

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:

JS Animated. How to replace an image with video using Fancybox
This entry was posted in JS Animated tutorials and tagged fancybox, HTML, image, video. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket

Live Chat
We help you to choose the right product.