diff --git a/main/menu.js b/main/menu.js
index 556f7bf8..735fa28b 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -13,6 +13,7 @@ function toggleFullScreen () {
 
 function onToggleFullScreen () {
   getMenuItem('Full Screen').checked = windows.main.isFullScreen()
+  windows.main.send('fullscreenChanged', windows.main.isFullScreen())
 }
 
 // Sets whether the window should always show on top of other windows
diff --git a/renderer/index.css b/renderer/index.css
index 20ef6fa5..12b14528 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -117,7 +117,6 @@ a:not(.disabled):hover, i:not(.disabled):hover {
 
 .header .nav {
   font-weight: bold;
-  margin-left: 78px;
   margin-right: 7px;
 }
 
@@ -176,6 +175,11 @@ body.drag::before {
   background-color: #000;
 }
 
+.player .letterbox {
+  height: 100%;
+  display: flex;
+}
+
 .player video {
   display: block;
   width: 100%;
@@ -325,11 +329,6 @@ body.drag::before {
   margin: 5px auto;
 }
 
-.player-controls .chromecast,
-.player-controls .airplay {
-  font-size: 22px; /* make the cast icons less huge */
-}
-
 .player-controls .chromecast,
 .player-controls .airplay,
 .player-controls .fullscreen {
@@ -340,6 +339,12 @@ body.drag::before {
   float: right;
 }
 
+.player-controls .chromecast,
+.player-controls .airplay {
+  font-size: 18px; /* make the cast icons less huge */
+  margin-top: 8px !important;
+}
+
 .player .playback-bar:hover .loading-bar {
   height: 5px;
 }
diff --git a/renderer/index.js b/renderer/index.js
index c88bf163..48cfd503 100644
--- a/renderer/index.js
+++ b/renderer/index.js
@@ -176,6 +176,11 @@ electron.ipcRenderer.on('seed', function (e, files) {
   seed(files)
 })
 
+electron.ipcRenderer.on('fullscreenChanged', function (e, isFullScreen) {
+  state.view.isFullScreen = isFullScreen
+  update()
+})
+
 function onFiles (files) {
   // .torrent file = start downloading the torrent
   files.filter(isTorrentFile).forEach(function (torrentFile) {
diff --git a/renderer/views/app.js b/renderer/views/app.js
index ad257ca1..16e01df6 100644
--- a/renderer/views/app.js
+++ b/renderer/views/app.js
@@ -17,9 +17,11 @@ function App (state, dispatch) {
     }
   }
 
+  var header = state.view.isFullScreen ? null : Header(state, dispatch)
+
   return hx`
     <div class="app">
-      ${Header(state, dispatch)}
+      ${header}
       <div class="content">${getView()}</div>
     </div>
   `
diff --git a/renderer/views/header.js b/renderer/views/header.js
index d9bf393c..77f54099 100644
--- a/renderer/views/header.js
+++ b/renderer/views/header.js
@@ -5,10 +5,13 @@ var hyperx = require('hyperx')
 var hx = hyperx(h)
 
 function Header (state, dispatch) {
+  var navLeftStyle = process.platform === 'darwin'
+    ? {marginLeft: '78px'} /* OSX needs room on the left for min/max/close buttons */
+    : null /* On Windows and Linux, the header is separate & underneath the title bar */
   return hx`
     <div class="header">
       ${getTitle()}
-      <div class="nav left">
+      <div class="nav left" style=${navLeftStyle}>
         <i class="icon back" onclick=${onBack}>chevron_left</i>
         <i class="icon forward" onclick=${onForward}>chevron_right</i>
       </div>
diff --git a/renderer/views/player.js b/renderer/views/player.js
index fd5f1191..e36fc294 100644
--- a/renderer/views/player.js
+++ b/renderer/views/player.js
@@ -27,11 +27,13 @@ function Player (state, dispatch) {
   // Show the video as large as will fit in the window, play immediately
   return hx`
     <div class="player">
-      <video
-        src="${state.server.localURL}"
-        onloadedmetadata="${onLoadedMetadata}"
-        autoplay="true">
-      </video>
+      <div class="letterbox">
+        <video
+          src="${state.server.localURL}"
+          onloadedmetadata="${onLoadedMetadata}"
+          autoplay="true">
+        </video>
+      </div>
       ${renderPlayerControls(state, dispatch)}
     </div>
   `