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

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

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');
  }
}

Answer 2

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>
        <a href="#carousel-example-generic" data-slide="prev" class="left carousel-control"><span class="glyphicon glyphicon-chevron-left"></span></a><a href="#carousel-example-generic" data-slide="next" class="right carousel-control"><span class="glyphicon glyphicon-chevron-right"></span></a>
        <div class="scroll-area"><a href="#qoutes" class="scrollDown"><i class="fa fa-angle-down fa-4x"></i></a></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>