angular + youtube iframe api + images

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="desktopApp">
    <h1>Angular + Youtube Iframe API + Images!</h1>
    
  <div ng-controller="PlayerController">
    <div id="yplayer"></div>
    <div class="controls">
      <img src="http://placehold.it/100x60/36C/fff" alt="one" ng-click="changeSlide('pco91kroVgQ')" />
      <img src="http://placehold.it/100x60/F36/fff" alt="two" ng-click="changeSlide('LrUvu1mlWco')" />
      <img src="http://placehold.it/100x60/093/fff" alt="three" ng-click="changeSlide('CevxZvSJLk8')" />
      
      
    </div>
  </div>
  </body>

</html>

// Code goes here
//Todo: avoid loading when Youtube is not in the lead media article.hasYoutube()

desktopApp = angular.module('desktopApp', []);

desktopApp.run(function () {
    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});

desktopApp.service('youtubePlayerApi', ['$window', '$rootScope', '$log', 
  function ($window, $rootScope, $log) {
        var service = $rootScope.$new(true);

        // Youtube callback when API is ready
        $window.onYouTubeIframeAPIReady = function () {
            $log.info('Youtube API is ready');
            service.ready = true;
            service.loadPlayer();
        };

        service.ready = false;
        service.playerId = 'yplayer';//id of a player element
        service.player = null;
        service.videoId = null;
        service.playerHeight = '390';
        service.playerWidth = '640';

        service.bindVideoPlayer = function (videoId) {
            $log.info('Binding to player ' + videoId);
            service.videoId = videoId;
        };

        service.createPlayer = function () {
            $log.info('Creating a new Youtube player for DOM id ' + this.playerId + ' and video ' + this.videoId);
            return new YT.Player(this.playerId, {
                height: this.playerHeight,
                width: this.playerWidth,
                videoId: this.videoId,
                events: {
                  'onReady': this.onPlayerReady
                }
            });
        };

        service.onPlayerReady = function(event) {
          $log.info('onPlayerReady');
          event.target.playVideo();
        };
        service.loadPlayer = function () {
            // API ready?
            $log.info('API ready?');
            $log.info(this.ready);
            $log.info(this.playerId);
            $log.info(this.videoId);

            if (this.ready && this.playerId && this.videoId) {
                if(this.player) {
                    //this.player.destroy();
                    var playerState = this.player.getPlayerState();
                    if(playerState==1 || playerState==2 || playerState==3){
                      this.player.stopVideo();
                    }
                    this.player.loadVideoById({'videoId': this.videoId});
                }
                else{
                  $log.info('loadPlayer');
                  this.player = this.createPlayer();
                }
            }
        };

        return service;
    }])


desktopApp.controller('PlayerController', ['$scope', 'youtubePlayerApi',
  function($scope, youtubePlayerApi) {
    youtubePlayerApi.bindVideoPlayer('pco91kroVgQ');

    $scope.changeSlide = function(videoId){
      youtubePlayerApi.bindVideoPlayer(videoId);
      youtubePlayerApi.loadPlayer();
      
    }
}]);

/* Styles go here */

Sources:
https://github.com/arnaudbreton/angular-youtube