diff --git a/static/clicks.html b/static/clicks.html
index f0995a1..d776a27 100644
--- a/static/clicks.html
+++ b/static/clicks.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div id="container" class="clicks-fullscreen-container"></div>
-    <script src="/static/clicks.js"></script>
+    <script src="/static/clicks.js" charset="UTF-8"></script>
     <script src="https://www.youtube.com/iframe_api"></script>
     <script>
 new Clicks('AIzaSyAoIqzEVYfji5CqdFWu0__8cym3RYOA-Pc', document.getElementById('container'), true, 'UA-70175137-1');
diff --git a/static/clicks.js b/static/clicks.js
index a715061..6563d0b 100644
--- a/static/clicks.js
+++ b/static/clicks.js
@@ -26,6 +26,7 @@ var Clicks = function(youTubeAPIKey, container, takeDocumentHashOwnership, track
     this.takeDocumentHashOwnership();
   }
 
+  window.addEventListener('keydown', this.onKeyDown_.bind(this));
   window.addEventListener('keypress', this.onKeyPress_.bind(this));
   window.setInterval(this.fireConfigChange.bind(this), 300);
 };
@@ -33,6 +34,12 @@ var Clicks = function(youTubeAPIKey, container, takeDocumentHashOwnership, track
 
 Clicks.youTubeIframeAPIReady = false;
 Clicks.onYouTubeIframeAPIReady = [];
+Clicks.keyCodeMappings = {
+  37: '←',
+  38: '↑',
+  39: '→',
+  40: '↓',
+};
 Clicks.keyStrings = {
   ' ': '<space>',
   '\x1b': '<esc>',
@@ -444,9 +451,7 @@ Clicks.prototype.buildButton_ = function(image, key) {
   button.appendChild(shortcut);
 
   button.addEventListener('click', function(e) {
-    this.onKeyPress_({
-      'charCode': key.charCodeAt(0),
-    });
+    this.handleKey_(key);
     e.stopPropagation();
   }.bind(this));
 
@@ -684,8 +689,21 @@ Clicks.prototype.onWindowResize_ = function(e) {
 };
 
 
+Clicks.prototype.onKeyDown_ = function(e) {
+  var key = Clicks.keyCodeMappings[e.keyCode];
+  if (key) {
+    this.handleKey_(key);
+  }
+};
+
+
 Clicks.prototype.onKeyPress_ = function(e) {
-  switch (String.fromCharCode(e.charCode).toLowerCase()) {
+  this.handleKey_(String.fromCharCode(e.charCode).toLowerCase());
+};
+
+
+Clicks.prototype.handleKey_ = function(key) {
+  switch (key) {
     case ' ':
       if (this.activePlayer_.player.getPlayerState() == YT.PlayerState.PLAYING) {
         this.activePlayer_.player.pauseVideo();
@@ -825,6 +843,22 @@ Clicks.prototype.onKeyPress_ = function(e) {
     case '*':
       this.activePlayer_.zoom(4.5);
       break;
+
+    case '←':
+      this.activePlayer_.pan(-10, 0);
+      break;
+    case '→':
+      this.activePlayer_.pan(10, 0);
+      break;
+    case '↑':
+      this.activePlayer_.pan(0, -10);
+      break;
+    case '↓':
+      this.activePlayer_.pan(0, 10);
+      break;
+
+    default:
+      console.log('Unknown key:', key);
   }
   this.fireConfigChange();
 };
@@ -909,6 +943,12 @@ ClicksVideo.prototype.zoom = function(zoomLevel) {
 };
 
 
+ClicksVideo.prototype.pan = function(x, y) {
+  this.playerContainer_.scrollLeft += x;
+  this.playerContainer_.scrollTop += y;
+};
+
+
 ClicksVideo.prototype.zoomOut = function() {
   var i = ClicksVideo.zoomLevels_.indexOf(this.zoomLevel_);
   this.zoom(ClicksVideo.zoomLevels_[i - 1] || this.zoomLevel_);
