Added support for advanced usage with iframe API

README.md

@@ -47,7 +47,7 @@ video ID.
 
 ## Inline Options
 
-There are a number of options that be configured inline with attributes. Here are a few:
+There are a number of options that be configured inline with attributes:
 
 | Option               | Default             | Description                                                                                 |
 | -------------------- | ------------------- | ------------------------------------------------------------------------------------------- |
@@ -59,13 +59,39 @@ There are a number of options that be configured inline with attributes. Here ar
 | end                  | null                | Video end time in seconds. If set, video will play until that point and stop (or loop).     |
 | content-z-index      | 99                  | If set, will replace the z-index of content within the directive.                           |
 | allow-click-events   | false               | If set to true, users will be able to click video to pause/play it.                         |
+| player-callback      | null                | If provided, player callback method will be called with the YouTube player object as the first and only argument. |
 
 **Example:**
 
 ```html
 <video-bg video-id="video.id" ratio="4/3" loop="false" mute="false" mobile-image="'/img/background-img.png'" start="30" end="120" content-z-index="500" allow-click-events="true"></video-bg>
 ```
 
+## Advanced Usage
+
+If you need more control over the video (for example, if you need to play/pause the video on a button click), provide a
+method with "player" as the only argument to the player-callback attribute.
+
+```html
+<video-bg video-id="video.id" player-callback="callback(player)"></video-bg>
+```
+
+```javascript
+angular.module('myApp').controller(['$scope', function($scope) {
+    $scope.callback = function(player) {
+        $scope.pauseVideo = function() {
+            player.pauseVideo();
+        };
+        $scope.playVideo = function() {
+            player.playVideo();
+        };
+    };
+});
+```
+
+The player object gives you complete access to all of the methods and properties on the player in the
+[YouTube IFrame API](https://developers.google.com/youtube/iframe_api_reference#Playback_controls).
+
 ## Browser Support
 
 Tested and working in Chrome, Firefox, Safari, Opera and IE 9+.

angular-video-bg.js

@@ -15,7 +15,7 @@ angular.module('angularVideoBg', []);
  * of the video background.
  * @element <video-bg video-id="videoId" ratio="ratio" loop="loop" mute="mute" start="start" content-z-index="contentZIndex" allow-click-events="allowClickEvents"></video-bg>
  */
-angular.module('angularVideoBg').directive('videoBg', function($window, $q) {
+angular.module('angularVideoBg').directive('videoBg', function($window, $q, $timeout) {
 	return {
 		restrict: 'EA',
 		replace: true,
@@ -28,28 +28,31 @@ angular.module('angularVideoBg').directive('videoBg', function($window, $q) {
             end: '=?',
             contentZIndex: '=?',
             allowClickEvents: '=?',
-            mobileImage: '=?'
+            mobileImage: '=?',
+            playerCallback: '&?'
 		},
         transclude: true,
 		template: '<div><div></div><div ng-transclude></div></div>',
 		link: function(scope, element, attrs, fn) {
 
-            scope.ratio = scope.ratio || 16/9;
-            scope.loop = scope.loop === undefined ? true : scope.loop;
-            scope.mute = scope.mute === undefined ? true : scope.mute;
-            scope.mobileImage = scope.mobileImage || '//img.youtube.com/vi/' + scope.videoId + '/maxresdefault.jpg';
-
             var computedStyles,
                 ytScript = document.querySelector('script[src="//www.youtube.com/iframe_api"]'),
                 $player = element.children().eq(0),
                 playerId,
                 player,
                 parentDimensions,
-                playerDimensions;
+                playerDimensions,
+                playerCallback = scope.playerCallback;
 
             playerId = 'player' + Array.prototype.slice.call(document.querySelectorAll('div[video-id]')).indexOf(element[0]);
             $player.attr('id', playerId);
 
+            scope.ratio = scope.ratio || 16/9;
+            scope.loop = scope.loop === undefined ? true : scope.loop;
+            scope.mute = scope.mute === undefined ? true : scope.mute;
+            scope.mobileImage = scope.mobileImage || '//img.youtube.com/vi/' + scope.videoId + '/maxresdefault.jpg';
+
+
             // Utility methods
 
             function debounce(func, wait) {
@@ -307,6 +310,11 @@ angular.module('angularVideoBg').directive('videoBg', function($window, $q) {
              * This is the method called when the "player" object is ready and can be interfaced with.
              */
             function playerReady() {
+                if (playerCallback) {
+                    $timeout(function() {
+                        playerCallback({ player: player });
+                    });
+                }
                 if (scope.mute && !player.isMuted()) {
                     player.mute();
                 } else if (player.isMuted()) {

bower.json

@@ -3,7 +3,7 @@
     "name": "https://github.com/kanzelm3"
   },
   "name": "angular-video-bg",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "main": "angular-video-bg.min.js",
   "ignore": [
     "**/.*",

index.html

@@ -20,9 +20,26 @@
   <script src="angular-video-bg.js"></script>
   <!-- Add New Component JS Above -->
 
-  <div>
-      <video-bg video-id="'zk9Acw-vmUs'"></video-bg>
+  <script type="text/javascript">
+      angular.module('angularVideoBg').controller('VideoCtrl', ['$scope', '$timeout', function($scope) {
+
+          $scope.callback = function(player) {
+              $scope.pauseVideo = function() {
+                  player.pauseVideo();
+              };
+              $scope.playVideo = function() {
+                  player.playVideo();
+              };
+          };
+
+      }]);
+  </script>
+
+  <div ng-controller="VideoCtrl">
+      <video-bg video-id="'nfWlot6h_JM'" player-callback="callback(player)"></video-bg>
       <p style="padding: 200px 0;">Testing transclude!</p>
+      <button type="button" ng-click="pauseVideo()" ng-show="pauseVideo">Pause Video</button>
+      <button type="button" ng-click="playVideo()" ng-show="playVideo">Play Video</button>
   </div>
   <div>
       <video-bg video-id="'cqcldOyEYRE'">