How to prevent Bootstrap carousel from moving while youtube iFrame is playing - youtube

Question

I am adding a YouTube Video to my Twitter Bootstrap carousel. Problem is it moves in the middle of the video and that looks ugly so I want to stop it on the iFrame click (to play). I try adding the following...
$(function() {
$("#movie-frame").bind('click', function(event) {
$('.carousel').carousel('pause')
alert("iframe clicked");
});
});
//in jade
iframe#movie-frame(frameborder="0", height="100%", width="100%", src="url")
This of course doesn't work because iFrames don't play nice with click events. Is there another way I can go about accomplishing this?
JSFiddle example *Movie is the last entry

Answer 1

For YouTube videos you can use it's API and follow to Get started for it.
So the code for player will look like(it's example from links above):
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onStateChange': function (event){
switch(event.data){
}
}
}
});
}
The player can have the following states:
-1 (unstarted)
0 (ended)
1 (playing)
2 (paused)
3 (buffering)
5 (video cued).
On each state you can add your custom behaivior.
EDIT:
Example in jsFiddle
HTML:
<div class="car col-xs-12">
<div id="carousel-example-generic" data-ride="carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="NaN" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="top-bumper"></div>
<a href="#Music">
<img src="http://www.recorddept.com/wp-content/uploads/2010/01/WoodyPines%E2%80%93CountingAlligators.jpeg"><div class="carousel-caption">Music</div>
</a></div>
<div class="item active">
<div class="top-bumper"></div>
<a href="#Vinyl">
<img src="http://www.clker.com/cliparts/8/9/f/1/1317521544340515496_45_record_album-hi.png"><div class="carousel-caption">Vinyl</div>
</a></div>
<div class="item">
<div class="background" id="player">
<div class="carousel-caption">Video</div>
</div>
</div>
</div>
<span class="glyphicon glyphicon-chevron-left"></span><span class="glyphicon glyphicon-chevron-right"></span>
<div class="scroll-area"><i class="fa fa-angle-down fa-4x"></i></div>
</div>
</div>
JavaScript:
<script type="text/javascript">
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'tZ5f3IZ6xlU',
events: {
'onStateChange': onPlayerStateChange
}
});
}
var done = false;
function onPlayerStateChange(event) {
switch(event.data){
case 1:
console.log("playing");
break;
default:
console.log("otherwise");
break;
}
}
function stopVideo() {
player.stopVideo();
}
</script>

Answer 2

Check this code.
function onPlayerStateChange(event) {
if(event.data== YT.PlayerState.PLAYING) {
$("#movie-frame").carousel('pause');
console.log('stop carousel');}// Stop the carousel, if video is playing
else {
$("#movie-frame").carousel('cycle');
// console.log('play carousel'); // Otherwise, start it
}
if(event.data== YT.PlayerState.ENDED) {
// player.playVideo();
$("#movie-frame").carousel('next');
}
}