Video problem with content glider

[Gustavsson15]

1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm

3) Describe problem:

Hello! i'm currently working on my portfolio for my website, and using featured content glider to show my music videos. But i have a problem, if i play the first video that is shown, it all works fine, but if i then click to watch the next video when the first one is playing, it continues to play in the background when the new video is shown. found an OnChange code for the featuredcontentglider.init script but it didn't work (don't know if i did it right though.)

Here's how my code looks know, and i also attach a screenshot how it looks know so you could understand better :)


<script type="text/javascript">

featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: false, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

<div id="canadaprovinces" class="glidecontentwrapper">

<!-- Start filmgalleri -->
<!-- Constrain -->
<div class="glidecontent">
<iframe width="960" height="540" src="http://www.youtube.com/embed/5ywQEMcxzEc?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<!-- Theo -->
<div class="glidecontent">

<iframe width="960" height="540" src="http://www.youtube.com/embed/aV8xrtW-CCg" frameborder="0" allowfullscreen></iframe>
</div>

<!-- Foxhunting -->
<div class="glidecontent">

<iframe width="960" height="540" src="http://www.youtube.com/embed/nZkStoGoE5k" frameborder="0" allowfullscreen></iframe>
</div>

</div>

<!-- galleri meny -->
<div id="p-select" class="glidecontenttoggler">
<a href="#" class="toc"><img src="filmgalleri/thumbnails/constrain_fade_thumb.png"
onmouseover="this.src='filmgalleri/thumbnails/constrain_thumb.png'"
onmouseout="this.src='filmgalleri/thumbnails/constrain_fade_thumb.png'"/></a>

<a href="#" class="toc"><img src="filmgalleri/thumbnails/theo_fade_thumb.png"
onmouseover="this.src='filmgalleri/thumbnails/theo_thumb.png'"
onmouseout="this.src='filmgalleri/thumbnails/theo_fade_thumb.png'"/></a>

<a href="#" class="toc"><img src="filmgalleri/thumbnails/fox-hunting_fade_thumb.png"
onmouseover="this.src='filmgalleri/thumbnails/fox-hunting_thumb.png'"
onmouseout="this.src='filmgalleri/thumbnails/fox-hunting_fade_thumb.png'"/></a>
</div>
<div class="klippcontainer">
<div class="video1">CONSTRAIN - SONG OF PROTEST</div>
<div class="video2">THEO - ETT ÖGA FÖR EN HAND</div>
<div class="video3">FOX HUNTING - MADE OF GOLD</div>
</div>


4886
Thanks!

[ddadmin]

I'm not aware of a modified version of FCG that comes with an onChange event handler, but regardless, the below modified one (see .js file) adds it. Using it, you can tact on an onChange event to your initialization code like so:


featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
onChange: function($prevcontent, $curcontent, $allcontents){
if ($prevcontent.length > 0){ // if previous content exists (this isn't the very first slide shown)
console.log( $prevcontent.text().substring(0,10), $curcontent.text().substring(0,10) )
}
}
})

Notice the trailing comma (,) after every option except the very last, in this case, onChange. This function is passed two parameters, a jQuery reference to the lastshown slide (a DIV), and the currently shown slide (a DIV as well). In the above example, I log to Firefox's console the first 10 characters of the last shown slide's contents, plus the current's.

Now to your youTube question specifically, how are you embedding the youtube videos, via IFRAME?

[ddadmin]

Just a heads up that I've just updated FCG with a new onChange event handler, plus a new section explaining how to use it to add Youtube videos to the slides: http://www.dynamicdrive.com/dynamicindex17/contentglider_suppliment4.htm

[Gustavsson15]

Hi again, Thanks for the respons. This script has made me go crazy since your response how to do. Cus i knew i did it all right, i checked the script over and over again but didn't got it to work. UNTIL NOW, when i realized the OnChange script don't work locally in chrome. because when i opened it in safari it all worked fine. So hope nobody else has to go through the same frustration as i haha!

Thanks for the help! :)