AngularJS directive for vimeo video with built in play & pause functions using the froogaloop library.

var app = angular.module('plunker', []);

app.directive('vimeo', function() {
    return {
      restrict: 'E',
      replace: true,
      scope: {
        //Assumes that true means the video is playing
        controlBoolean: '='
      },
      template: '<iframe id="{{id}}" height="{{height}}" width="{{width}}"> {{text}} </iframe>',
      link: function postLink(scope, element, attrs) {
        var url = "http://player.vimeo.com/video/" + attrs.vid + "?title=0&byline=0&portrait=0&api=1";
        element.attr('src', url);

        var iframe = element[0],
        player = $f(iframe);

        scope.$watch('controlBoolean', function(){
          if(scope.controlBoolean){
            player.api('play');
          }
          else{
            player.api('pause');
          }
        });
      }
    };
  });

app.controller('MainCtrl', function($scope, $http, $log, $document) {
    $scope.isPlaying = false

    $scope.pause = function(){
      $scope.isPlaying = false;
    };

    $scope.play = function(){
      $scope.isPlaying = true;
    };

  });

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <vimeo control-boolean="isPlaying" vid="83944368" pid="1"></vimeo>
    <p><button ng-click="play()">Play</button> <button ng-click="pause()">Pause</button></p>
  </body>

</html>

/* Put your css in here */