test facebook embed

by Julian

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">

< class="fancybox  src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fnico.nouturn%2Fvideos%2Fvb.697561151%2F10153917392226152%2F%3Ftype%3D3&show_text=0"></iframe>
Video #1

<br />

<a class="fancybox fancybox.iframe" href="http://www.youtube.com/embed/cYplvwBvGA4?autoplay=1&wmode=opaque">Video #2</a>

<br />

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>

<br />

<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>

CSS

.fancybox-type-iframe .fancybox-nav {
    width: 60px;       
}

.fancybox-type-iframe .fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
      display:block; /* Add this */
        overflow-y: hidden;
    padding: 0px !important;
    position: relative; top: -10px; left: -10px; overflow: hidden;
}

.fancybox-type-iframe .fancybox-nav:hover span {
    opacity: 1;
}

.fancybox-type-iframe .fancybox-next {
    right: -60px;
}

.fancybox-type-iframe .fancybox-prev {
    left: -60px;
}

JavaScript

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        nextEffect  : 'none',
        prevEffect  : 'none',
        padding     : 0,
        margin      : [20, 60, 20, 60] // Increase left/right margin
    });