fancybox youtube

fancybox youtube

by ian_smithz

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>

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

<br />

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

<br />

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

CSS

.fancybox-nav {
    width: 60px;       
}

.fancybox-nav span {
    visibility: visible;
}

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

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

JavaScript

// Fires when the player's state changes.
function onPlayerStateChange(event) {
    // Go to the next video after the current one is finished playing
    if (event.data === 0) {
        $.fancybox.next();
    }
}

// The API will call this function when the page has finished downloading the JavaScript for the player API
function onYouTubePlayerAPIReady() {
    
  function() {
    // Find the iframe ID
    var id = $.fancybox.inner.find('iframe').attr('id');

    // Create video player object and add event listeners
    var player = new YT.Player(id, {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
     });
  }
}