YouTube iframe

by jrweinb

HTML

<script src="http://proloser.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.video.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/anythingslider.css">
<div id="video_bg">
                    <ul id="slider">
                        <li class="panel1"><iframe title="YouTube video player" width="550" height="335" src="http://www.youtube.com/embed/kwYcwtsVSFI" frameborder="0" allowfullscreen></iframe></li>
                        <!-- YouTube: iframe -->
                        <li class="panel2"><iframe title="YouTube video player" width="550" height="335" src="http://www.youtube.com/embed/vfno_6idEkg" frameborder="0" allowfullscreen></iframe></li>
                        <!-- YouTube: iframe -->
                        <li class="panel3"><iframe title="YouTube video player" width="550" height="335" src="http://www.youtube.com/embed/yArVjVHV8Xw" frameborder="0" allowfullscreen></iframe></li>
                        <!-- YouTube: iframe -->
                        <li class="panel4"><iframe title="YouTube video player" width="550" height="335" src="http://www.youtube.com/embed/iVXKq6fMr4o" frameborder="0" allowfullscreen></iframe></li>
                        <!-- YouTube: iframe -->
                        <li class="panel5"><iframe title="YouTube video player" width="550" height="335" src="http://www.youtube.com/embed/BbTVL-mHdho" frameborder="0" allowfullscreen></iframe></li>
                    </ul>                                                                    
                    
                    <div id="externalNav">
                                <a href="#1" ><img src="http://www.equifunk.com/2012/images/youtube_thumb1.jpg" width="103px" height="72px"></a>
                                <a href="#2" ><img...

JavaScript

$('#slider').anythingSlider({
            // If true, builds a list of anchor links to link to each panel
            buildNavigation: false,
            resizeContents      : true,
            addWmodeToObject    : 'transparent',
            buildArrows: false,
            buildStartStop: false,
            animationTime: 500,
            easing: 'easeOutExpo',
            onInitialized: function(e, slider) {
                    slider.$items
                        .wrapInner('<div class="inner"/>')
                        .not(slider.$currentPage).find('.inner').fadeOut();
                },
            onSlideBegin: function(e, slider) {
               slider.$currentPage.find('.inner').fadeOut(500, "easeOutExpo");
               },
           // Callback when slide completes - no event variable!
           onSlideComplete: function(slider) {
               slider.$targetPage.find('.inner').fadeIn(500,"easeInExpo");
           }

        });


        // set up external links
        $('#externalNav a').click(function(){
            var slide = $(this).attr('href').substring(1);
            $('#slider').anythingSlider(slide);
            
            return false;
        });