Moved inline styles to css and increased buddy picture capture size to 128x128.

src/styles/components/_buddypicture.scss

@@ -35,6 +35,14 @@
       object-fit: cover;
     }
   }
+  .videoPictureVideo {
+    width: 200px;
+    height: 200px;
+    .videoPrev, video, .preview {
+      width: 100%;
+      height: 100%;
+    }
+  }
   .videoFlash {
     position: absolute;
     left:0px;

static/js/directives/buddypicture.js

@@ -24,6 +24,12 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
 
 		var controller = ['$scope', 'safeApply', '$timeout', '$q', function($scope, safeApply, $timeout, $q) {
 
+			// Buddy picutre capture size.
+			$scope.captureSize = {
+				width: 128,
+				height: 128
+			};
+
 			$scope.showTakePicture = false;
 			$scope.waitingForPermission = false;
 			$scope.previewPicture = false;
@@ -175,6 +181,7 @@ define(['jquery', 'underscore', 'text!partials/buddypicture.html'], function($,
 			$scope.flash = $element.find(".videoFlash");
 			$scope.canvasPic = $element.find("canvas.videoPic").get(0);
 			$scope.canvasPrev = $element.find("canvas.videoPrev").get(0);
+			$($scope.canvasPic).attr($scope.captureSize);
 
 		};
 

static/partials/buddypicture.html

@@ -1,14 +1,14 @@
 <div class="buddyPicture">
-	<img class="picture" ng-show="user.buddyPicture" ng-src="{{user.buddyPicture}}" alt="" />
+	<img class="picture" ng-show="user.buddyPicture" ng-src="{{user.buddyPicture}}" alt="" width="46" height="46" />
 	<div class="collapse showTakePicture" collapse="!showTakePicture">
 		<div class="videoPicture">
-			<div class="videoPictureVideo" style="width:200px; height: 200px">
+			<div class="videoPictureVideo">
 				<div class="videoFlash"></div>
 				<div class="countdownPicture" ng-show="countdown.num" ng-bind="countdown.num"></div>
-				<video ng-show="!previewPicture" autoplay="autoplay" width="200" height="200"></video>
-				<canvas class="videoPic" style="display:none" width="46" height="46"></canvas>
-				<canvas class="videoPrev" style="display:none" width="200" height="200"></canvas>
-				<img class="preview" ng-class="{previewPicture: previewPicture}" ng-show="previewPicture" ng-src="{{preview}}" width="200" width="200" alt="" />
+				<video ng-show="!previewPicture" autoplay="autoplay"></video>
+				<canvas class="videoPic hidden"></canvas>
+				<canvas class="videoPrev hidden"></canvas>
+				<img class="preview" ng-class="{previewPicture: previewPicture}" ng-show="previewPicture" ng-src="{{preview}}" alt="" />
 				<a class="btn btn-xs btn-success btn-takePicture" ng-disabled="countingDown || waitingForPermission" ng-show="!previewPicture && !countingDown" ng-click="takePicture()"> {{_('Take')}}</a>
 				<a class="btn btn-xs btn-success btn-retakePicture" ng-disabled="waitingForPermission" ng-show="previewPicture" ng-click="retakePicture()"> {{_('Retake')}}</a>
 			</div>