Bootstrap Carousel, Slide after Youtube Video has finished. (Using YouTube API)

A simple solutions for anyone looking to play a YouTube video as their first slide in a BootStrap Carousel.

With this solution, you can have a YouTube video play as the first slide, once the video finishes, the Carousel will begin to slide through the other slides.

DEMO

<div id="myCarousel" class="carousel slide" data-ride="carousel">

 <!-- Indicators -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 <li data-target="#myCarousel" data-slide-to="3"></li>
 </ol>
 
 <!-- Wrapper for slides -->
 <div class="carousel-inner" role="listbox">
 <div class="item active">
 <div class="embed-responsive embed-responsive-16by9">
 <div class="background" id="player"></div>
 </div>
 </div>
 
 <div class="item">
 <img src="http://placehold.it/640x385" />
 </div>
 
 <div class="item">
 <img src="http://placehold.it/640x385" />
 </div>
 
 <div class="item">
 <img src="http://placehold.it/640x385" />
 </div>
 </div>
 
 <!-- Left and right controls -->
 <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
 </a>
 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Next</span>
 </a>
</div>
<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>
<script>
 
 //SET BOOTSTRAP CAROUSEL INTERVAL TO 5 SECONDS
 //SET HOVER PAUSE TO FALSE
 $('#myCarousel').carousel({
 interval: 5000,
 pause: 'false'
 });
 
 //ON LOAD, PAUSE BOOTSTRAP CAROUSEL
 $( window ).load(function() {
 $('#myCarousel').carousel('pause');
 });
 
 //YOUTUBE API EMBED
 var player;
 function onYouTubeIframeAPIReady() {
 player = new YT.Player('player', { playerVars: {
 autoplay: 1,
 loop: 1,
 controls: 1,
 showinfo: 0,
 autohide: 1,
 modestbranding: 1,
 html5:1,
 rel: 0},
 videoId: 'oHg5SJYRHA0',
 events: {
 'onStateChange': onPlayerStateChange
 }
 });
 }
 
 //FIND OUT STATE OF YOUTUBE VIDEO, HAS IT FINISHED? IS IT PISSED AS A FART?
 //IF IT'S FINISHED, START CAROUSEL CYCLE
 var myPlayerState;
 function onPlayerStateChange(event) {
 if (event.data == YT.PlayerState.ENDED) {
 $('#myCarousel').carousel('cycle');
 }
 myPlayerState = event.data;
 }
 
 //IF DIRECTIONAL ARROWS ARE CLICKED, PAUSED VIDEO
 $( ".carousel-control",".carousel-indicators" ).click(function() {
 player.stopVideo();
 $('#myCarousel').carousel('cycle');
 });
</script>