The onChange event handler/ Embedding YouTube videos

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

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

When the Slider 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, contentdivs, is an array referencing all of the slides within the Slider. Putting it all together, the below simple example logs to the browser console the contents of the current slide if the previous and current slide are not the same (this is not the first slide shown when the page loads):

onChange: function(previndex, curindex, contentdivs){
 if (previndex != curindex) // if this isn't first slide shown when page loads
  console.log(contentdivs[curindex].innerHTML)
}

The code:

contentdivs[index]

lets you access a particular slide within the slider  based on its index (where 0=1st slide, 1=2nd slide etc).

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 Slider, 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 Slider with 4 slides, 2 of them containing a Youtube video. If the user plays a video and moves to another slide, the Slider will pause the previous slide's video if there exists one:

Full HTML Source:

Select All

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

Content 2 Here.

Go to 3rd slide

Content 4 Here.

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 slider and creates 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 HTML markup for the slider is the Youtube code that finds any Youtube IFRAMEs inside the slider, and initializes a Youtube API player on each one if found.
  • Specifically, we define the function onYouTubeIframeAPIReady(), which the Youtube API calls automatically once the API has loaded on the page. We loop through all of the slides within the Slider, and locate any one with a Youtube IFRAME in it. If found, we create a new instance of the Player on the corresponding Youtube IFRAME, by calling new YT.Player(), and store the returned API player inside the corresponding Content Div: contentdivs[i].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, featuredcontentslider.init(), we populate the onChange event handler with the code:
     
    onChange: function(previndex, curindex, $allcontents){ // fires when Glider changes slides
     if (previndex != curindex)
      playpausevideo( contentdivs[previndex].youtubeplayer, "pause" ) // pause previous slide's youtube 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