CSS Codes
CSS Layouts

The onChange event handler/ Embedding YouTube videos

The  onChange event handler, defined as an option within the initialization code featuredcontentglider.init(), lets you execute code whenever the Glider changes slides, including when the very first slide glides in automatically on page load. The event handler has the syntax:

onChange: function(previndex, curindex, $allcontents){
 //custom code here
}

When the Glider first loads on the page, the first two parameters point to the same slide. The index count starts at 0, meaning 0 indicates the 1st slide, 1 the second etc. The third parameter, $allcontents, is an array-like jQuery collection referencing all of the slides within the Glider. Putting it all together, the below simple example changes the background color of the current slide to lightyellow (and the previous slide's background color to white):

onChange: function(previndex, curindex, $allcontents){
 $allcontents.eq(curindex).css({backgroundColor: 'lightyellow'}) //change current slide to lightyellow
 if (previndex != curindex) // if the current slide isn't the same as the previous slide
  $allcontents.eq(previndex).css({backgroundColor: 'white'}) // change previous slide to white
}

The code:

$allcontents.eq( index )

lets you access a particular slide within the glider based on its index (where 0=1st slide, 1=2nd slide etc). In the above case, we see how to access both the previous slide and current slide.

Embedding YouTube videos with the help of the onChange event handler

Embedding Youtube videos inside sliders is all fine and dandy until the user decides to play a video- when the user changes slides, what happens typically is that the video in the previous slide will continue to play, creating an audio and visual mess of increasing proportions. Well, using the onChange event handler of Featured Content Glider, along with YouTube's API that lets us use JavaScript to dynamically manipulate a YouTube video, we can take care of this pesky issue once and for all.

The below complete example demonstrates a Glider with 4 YouTube videos inside it, one for each slide. If the user plays a video and moves to another slide, the Glider will pause the previous slide's video as well, ensuring at no time are two videos playing at the same time:

Full HTML Source:

Select All

Demo (try playing a video then move on to another slide- the previous slide's video should stop playing):

The Youtube portion of the code relies on Google's YouTube IFRAME API to do much of the workload. First the code seeks out the YouTube iframes within the glider and create a new instance of the API Player on each one so we can control them via JavaScript. The important parts to take away from the above code are:

  • Following the scripts for the Featured Content Glider in the HEAD section of the page, we define the function onYouTubeIframeAPIReady(), which Youtube API calls automatically once the API has loaded on the page. Inside it we create a new instance of the Player for each corresponding Youtube IFRAME, by calling new YT.Player(). The returned API player object is then stored inside the corresponding Content Div via jQuery's data() method: $contentdiv.data("youtubeplayer", player)
  • We define the function playpausevideo(player, action) that accepts one of the API players' object (stored inside each Content DIV) and either plays or pauses the video depending on the desired action.
  • Going back to the initialization code for the Glider, featuredcontentglider.init(), we populate the onChange event handler with the code:
     
    onChange: function(previndex, curindex, $allcontents){ // fires when Glider changes slides
     if (previndex != curindex)
      playpausevideo($allcontents.eq(previndex).data('youtubeplayer'), 'pause') //pause previous slide's video
    }

    All the code does is look up the API player of the previous slide, which is stored inside the Content DIV that houses it, and pauses it.
  • Finally, inside the HTML markup of the slider, each Youtube video is defined by embedding  an IFRAME tag which you obtain from the desired Youtube video page, under the Share -> Embed menu tab (below the video player). The only change you need to make to the copied code is to add the portion in red to the end of each IFRAME's src property:
    <iframe width="330" height="210" src="http://www.youtube.com/embed/KWFfDyupGpQ?enablejsapi=1" frameborder="0" allowfullscreen></iframe>

    With the change added, paste the resulting IFRAME code inside each slide's DIV container.

Now, in order to take full advantage of Google's Youtube API, you'll  obviously need to read the API documentation, though this example should point you in the right direction as far as integrating Youtube videos inside the Glider, with the help of the onChange event handler.

Table Of Contents

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post