diff --git a/source/Ox.UI/css/theme.css b/source/Ox.UI/css/theme.css
index f2ec1bc0..05bb853f 100644
--- a/source/Ox.UI/css/theme.css
+++ b/source/Ox.UI/css/theme.css
@@ -1037,8 +1037,8 @@ Video
     border-color: $videoTimelineMarkerShadow;
 }
 
-.$themeClass .OxVideoPlayer .OxControls,
-.$themeClass .OxVideoPlayer .OxControls .OxFind {
+.$themeClass .OxVideoPlayer .OxControls.OxOnScreen,
+.$themeClass .OxVideoPlayer .OxControls.OxOnScreen .OxFind {
     background-image: -moz-linear-gradient(top, $videoBarGradient);
     background-image: -o-linear-gradient(top, $videoBarGradient);
     background-image: -webkit-linear-gradient(top, $videoBarGradient);
diff --git a/source/Ox.UI/js/Video/VideoPlayer.js b/source/Ox.UI/js/Video/VideoPlayer.js
index ede2f481..03bcf611 100644
--- a/source/Ox.UI/js/Video/VideoPlayer.js
+++ b/source/Ox.UI/js/Video/VideoPlayer.js
@@ -2449,6 +2449,11 @@ Ox.VideoPlayer = function(options, self) {
                     zIndex: 1000
                 })
                 .appendTo(Ox.UI.$body);
+            if (self.options.externalControls) {
+                self.externalControls = true;
+                self.options.externalControls = false;
+                self.$videoContainer.css({top: 0});
+            }
             setSizes(true, function() {
                 playOnFullscreen && self.$video.play();
                 enterFullscreen();
@@ -2461,6 +2466,10 @@ Ox.VideoPlayer = function(options, self) {
                 .trigger('mouseleave')
                 .off('mouseenter mouseleave');
             clearTimeout(self.interfaceTimeout);
+            if (self.externalControls) {
+                self.options.externalControls = true;
+                self.$videoContainer.css({top: '16px'});
+            }
             setSizes(true, function() {
                 self.exitFullscreen = false;
                 that.detach()