Fancybox video in pop up

In this post, we are going to display videos in fancy box pop up. we can navigate between video, using next and previous button. This small code snippet should help you for displaying videos.

First Include fancy box from CDN links as below

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js" type="text/javascript"/>
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.css" type="text/javascript"/>

Construct HTML to show the video:

                <div id="carousel">

                    <div>

                        <a class="fancybox" rel="arch" data-fancybox-type="iframe" href="http://www.youtube.com/embed/L9szn1QQfas">

                           <img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/>

                        </a>

                    </div>

                    <div>

                        <a class="fancybox" rel="arch" data-fancybox-type="iframe" href="http://www.youtube.com/embed/cYplvwBvGA4">

                            <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>

                        </a>

                    </div>

                    <div>

                        <a class="fancybox" rel="arch" data-fancybox-type="iframe" href="http://www.youtube.com/embed/L9szn1QQfas">

                           <img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/>

                        </a>

                    </div>

                    <div>

                        <a class="fancybox" rel="arch" data-fancybox-type="iframe" href="http://www.youtube.com/embed/cYplvwBvGA4">

                           <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/>

                        </a>

                    </div>

                    <div>

                        <a class="fancybox" rel="arch" data-fancybox-type="iframe" href="http://www.youtube.com/embed/L9szn1QQfas">

                           <img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/>

                        </a>

                    </div>

                </div>

CSS:
// style our iframe.

.fancybox-type-iframe .fancybox-nav {

    width: 10%;

    height: 70%;

    margin: 15% 0;

}

JS:

// apply fancybox as below, on all the links which has class "fancybox".
 

$(".fancybox").fancybox();

Here is code and demo http://jsfiddle.net/TWXq9/4/